AngularJS - Directive not recognizing controller

Question

If I have a directive and a controller in the same file:

var app =  angular.module('app.navigation', []);

app.controller('NavItemCtrl', [ ....])

app.directive('navItem', [
        'ribbon', '$window', function (ribbon, $window) {
            return {
                require: ['^navigation', '^?navGroup'],
                restrict: 'AE',
                controller: 'NavItemCtrl',
      ...
      }])

Everything is fine, but if I move the controller code to a different file, because the current file is becoming too clutered, using the same module, and referencing the new controller file in my index page, the directive screams

          p0=NavItemCtrl&p1=not aNaNunction got undefined

My index page is like this:

 <html>
 <body>
  ....

 <script app.js ...>
 <script new controller file path .... >
 <script original directive file path .... >
  ....
 </body>
 </html>

What am I missing here?

[Solution] Delta is right, I figured it out:

For good housing keeping, I think it may be wise to have one JS file, listed as a dependency in the main app.js, that instantiates all the modules you will use, assuming your project is becoming large, and then reuse that instantiate w/o having any dependencies.

As example:

(1) Main App:

angular.module('MainApp', ['ngRoute', 'ngAnimate', 'app.SubApp1', 'app.SubApp2', 'app.SubApp3' ...]

(2) Then as a repository, if you will, create a new js file, say repositoryApp.js, instantiating these sub apps, making sure that this file is referenced before all other files that will use these sub app modules:

angular.module('app.SubApp1', [xxx]);
angular.module('app.SubApp2', [xxx]);
angular.module('app.SubApp3', [xxx]);

(3) Then when creating a series of directives, controllers, or whatever pertaining to a particular sub app, merely reference that sub app in the respective file as:

angular.module('app.SubApp1').controller('foo') .....
angular.module('app.SubApp1').directive('bar') .....

Without the dependency brackets as that is what threw the error for me.

When moving the controller to a different file, are you including the controller file after the first JS file in your index page? — Steven Britton
– Steven Britton, Commented Jun 30, 2014 at 17:49
If I am understanding you correctlu, I have the controllerJs file before the directive Js file. — user1177440
– user1177440, Commented Jun 30, 2014 at 17:52

Delta · Accepted Answer · 2014-06-30 18:03:54Z

2

in your directive are you getting you app like this

var app =  angular.module('app.navigation');

if you put the brackets after it like your first example you will just be replacing what you have currently instead of getting it.

This get a new module

var app =  angular.module('app.navigation', []);

This gets an existing modules.

var app =  angular.module('app.navigation');

Notice the exclusion of the brackets in the second example.

edited Jun 30, 2014 at 18:03

answered Jun 30, 2014 at 17:55

Delta

8611 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1177440 Over a year ago

I even went so far as this with no luck: angular.module('app.navigation', []).controller('xxxx) and angular.module('app.navigation', []).directive('xxxx')....

Delta Over a year ago

you cannot put the [] in the directive. that is replacing what you did with the controller.

Collectives™ on Stack Overflow

AngularJS - Directive not recognizing controller

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related