CODEWITHSUNDEEP
javascriptangularjs
Jason Shultz
Jason Shultz

Reputation: 970

How to avoid angular loading multiple times when adding directive?

In my app.js file I have the app being created like this:

angular
    .module('AngularRails',[
      'ngRoute',
      'templates',
      'firebase',
      'mySharedElements',])

i'm attempting to load a directive in one of my views like this:

angular.module("mySharedElements", []).directive('userItem', [function()

However, this doesn't work? I receive an error in Developer Tools stating that Angular attempted to load multiple times and thus the tab locks up. I tried solving that but adding 'mySharedElements' as you can see from the code but that didn't work. From various sites I've read, I'm doing it the right way so I'm confused what I'm doing wrong because obviously I am.

Thank you for your help, I appreciate it. :)

UPDATE:

I double checked and i'm not using ng-app more than once. The error only occurs when I attempt to go to the page where the directive is being used.

I update the app.js file and the directive to this to see if that fixed it:

app.js:

angular
    .module('AngularRails',[
      'ngRoute',
      'templates',
      'firebase',])
    .config(function ($routeProvider, $locationProvider) {
// etc.

directive:

angular.module("AngularRails").directive('userItem', [function() {
// etc.

And that fixed it. It looks like I was suffering from a combination of this and I had the templateURL wrong in the directive and it was screwing stuff up. THANKS!

Upvotes: 0

Views: 2445

Answers (1)

ShankarSangoli
ShankarSangoli

Reputation: 69905

angular.module("mySharedElements", []) will create a new app because you are passing second argument to module with empty dependencies.

If you have already created the app somewhere else in your code then you just need a reference to it. Change it to angular.module("mySharedElements").directive then it should be fine.

However looking at the error description mentioned in the question Angular attempted to load multiple times, it looks like you have multiple references to angular js on your page. Try to check for that and remove multiple references.

Upvotes: 1

Related Questions