1

I have just created a directive in a file called helloWorldz.js file which looks like this :

'use strict';

angular.module('components')
  .directive('helloWorld', function () {
    return {
      restrict : 'E',
      template : '<span>Hello World</span>'
    };
});

my app.js file which contains my routes looks like this :

'use strict';

angular.module('mmApp', ['components'])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/designs', {
        templateUrl: 'views/designs.html',
        controller: 'MainCtrl'
      })
      .when('/blog', {
        templateUrl: 'views/blog.html',
        controller: 'MainCtrl'
      })   
      .otherwise({
        redirectTo: '/'
      });
  });

my controller main.js which is not done looks like this :

'use strict';

angular.module('mmApp', [])
  .controller('MainCtrl', function ($scope) {
    $scope.designTiles = [
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
    ];
  });

Chrome Dev Tools tells me that helloWorldz.js is being successfully loaded. See below

enter image description here

I should mention that if I place my directive code in my main.js after my controller, and pass in ['components'] as the argument after mmApp I will see my directive code work. Here is the altered main.js controller : 

'use strict';

angular.module('mmApp', ['components'])
  .controller('MainCtrl', function ($scope) {
    $scope.designTiles = [
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
      { imageURL : "", title : "IMAGE" },
    ];
  });

angular.module('components', [])
  .directive('helloWorld', function () {
    return {
      restrict : 'E',
      template : '<span>Hello World</span>'
    }
});

How come app.js is not successfully calling in the components module which contains my helloWorld directive? Is this an possible issue with app.js not being able to connect to helloWorldz.js?

I should also mention that I am using grunt to compile everything.

4

1 回答 1

1

看起来指令代码在独立版本中略有不同。有：

angular.module('components')

代替

angular.module('components',[])

解决这个问题（通过将参数添加到独立版本）应该可以解决问题。我想很多人都遇到过这个问题，因为AngularJS 的模块页面上的最高评论是：

该文档应警告“angular.module('myModule', [])” 总是创建一个新模块，但“angular.module('myModule')” 总是检索现有引用。

于 2013-06-01T22:27:14.090 回答