angularjs directive definition using angular.module

Question

Please can anyone explain why the following throws an "Argument 'MainCtrl' is not a function, got undefined" error which seems to be tied into the use of module dependency injection with directives(?!).

angular.module('app', [])
  .controller('MainCtrl', [function() {
    var self = this;
    self.name = "will this work";
    self.items = [
      {
        name: "name 1",
        test: "test 1"
      },
      {
        name: "name 2",
        test: "test 2"
      }
    ];
  }]);

angular.module('app',[])
  .directive('typeahead', [function() {
    return {
      templateUrl: 'type-ahead.html',
      restrict: 'AEC',
      scope: {
        items: '=',
        prompt: '@',
        title: '@',
        subtitle: '@',
        model: '=',
        onSelect: '&'
      }, <...more code>

Yet it will work perfectly fine when I remove the

[ ]

module dependency braces from the directive to read

angular.module('app').directive('typeahead', ...)

It also works perfectly fine if I define the directive as a cascade following the controller definition i.e.

angular.module('app', [])
      .controller('MainCtrl', [function() {
        var self = this;
        self.name = "will this work";
        self.items = [
          {
            name: "name 1",
            test: "test 1"
          },
          {
            name: "name 2",
            test: "test 2"
          }
        ];
      }])

    .directive('typeahead', [function() {
        return {

Thanks in advance!

angular.module('app', []) creates a module, angular.module('app') gets already created module. When you create a module again, yes obviously it is created again and anything registered before is gone for good. — PSL
– PSL, Commented Feb 1, 2015 at 2:00

Rebornix · Accepted Answer · 2015-02-01 02:14:00Z

2

You are running into Angular's Creation versus Retrieval Problem:

Beware that using angular.module('myModule', []) will create the module myModule and overwrite any existing module named myModule. Use angular.module('myModule') to retrieve an existing module.

The first time you run angular.module('app',[]), Angular will create a module called app. Next time, you only need to run angular.module('app'), Angular will try to load the existing module app.

Since you call angular.module('app',[]) once again, module app has been re-initialized. That's why MainCtrl is undefined now.

edited Feb 1, 2015 at 2:14

answered Feb 1, 2015 at 2:01

Rebornix

5,2701 gold badge25 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

angularjs directive definition using angular.module

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related