Question

我刚刚在一个名为helloWorldz.js的文件中创建了一个指令，如下所示：

'use strict';

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

我的app.js文件包含我的路线，如下所示：

'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: '/'
      });
  });

我的控制器main.js未完成，如下所示：

'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告诉我helloWorldz.js已成功加载。见下文

enter image description here

我应该提一下，如果我将我的指令代码放在我的控制器之后的main.js中，并在['components']之后传递mmApp作为参数，我会看到我的指令代码有效。这是改变后的main.js控制器：

'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>'
    }
});

为什么app.js未成功调用包含components指令的helloWorld模块？这可能是app.js无法连接到helloWorldz.js的问题吗？

我还应该提一下，我正在使用grunt编译所有内容。

Answer 1

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

angular.module('components')

而不是

angular.module('components',[])

修复（通过将参数添加到独立版本）可以解决问题。我认为很多人都遇到过这种情况，因为AngularJS's module page的最高评论是：

此文档应警告“angular.module（'myModule'，[]）” 总是创建一个新模块，但始终是“angular.module（'myModule'）” 检索现有的引用。

为什么我的AngularJS应用程序中没有显示我的指令？

1 个答案: