angularjs - 为什么我的角度工厂没有加载？

Question

示例... Plunker

插件.js：

(function () {
  'use strict';
 angular.module('jzAddons', [])
  .factory('jzThemeFac', function () {
    return {
      themes:[
        {
          name: 'none',
          url: '',
          margin: '8px',
          bg: '#ffffff'
        },
        {
          name: 'amelia',
          url: '//netdna.bootstrapcdn.com/bootswatch/3.1.0/amelia/bootstrap.min.css',
          margin: '6px',
          bg: '#108a93'
        }
      ],

      changeTheme: function (theme) {
        var oldLink = angular.element('#bootstrapTheme');
        oldLink.remove();
        if (theme.name !== 'none') {
          var head = angular.element('head');
          head.append('<link id="bootstrapTheme" href="' + theme.url + '" rel="stylesheet" media="screen">');
        }
        currentTheme = theme;
      }
    };
  });

})();

应用程序.js：

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

(function () {
  'use strict';

  app.controller('MainCtrl', ['jzThemeFac', function ($scope, jzThemeFac) {
    $scope.themes = jzThemeFac.themes;  /* Error comes from this line */
  }]);

})();

在我的身体标签的底部，我有：

<script src="addon.js"></script>
<script src="app.js"></script>

我不断收到错误：

TypeError: Cannot read property 'themes' of undefined

Answer 1

您的工厂注入错误，您可以执行以下操作：

app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {...

要不就：

app.controller('MainCtrl', function ($scope, jzThemeFac) {

编辑：您还可以移动：

(function () {
    'use strict';  

到文件开头

Answer 2

您需要记住将 $scope 注入您的 MainCtrl。所以 app.js 应该是这样的：

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

(function () {
  'use strict';

  app.controller('MainCtrl', ['$scope', 'jzThemeFac', function ($scope, jzThemeFac) {
    $scope.themes = jzThemeFac.themes;  /* Error comes from this line */
  }]);

})();