角度依賴注入無法識別模塊

Question

我在將一個模塊正確地注入一個項目時遇到了麻煩。 這是我關注的項目

https://thinkster.io/django-angularjs-tutorial

當我嘗試發表新帖子時-角度拋出以下錯誤

Error: Authentication.getAuthenticatedAccount(...) is undefined
submit@http://localhost:8000/static/javascripts/posts/controllers/new-post.controller.js:31:21
$parseFunctionCall@http://localhost:8000/static/bower_components/angular/angular.js:12474:15

這是出現問題的地方

function NewPostController($rootScope, $scope, Authentication, Snackbar, Posts) {
    var vm = this;

    vm.submit = submit;

    function submit() {
      $rootScope.$broadcast('post.created', {
        content: vm.content,
        author: {
          username: Authentication.getAuthenticatedAccount().username
        }
      });

      $scope.closeThisDialog();

      Posts.create(vm.content).then(createPostSuccessFn, createPostErrorFn);

      function createPostSuccessFn(data, status, headers, config) {
        Snackbar.show('Success! Post created.');
      }

      function createPostErrorFn(data, status, headers, config) {
        $rootScope.$broadcast('post.created.error');
        Snackbar.error(data.error);
      }
    }
  }

但是我可以看到代碼中使用了正確的模塊。

這是我的new-post.controller.js文件，我在其中注入了Authentication依賴項

  angular
    .module('thinkster.posts.controllers')
    .controller('NewPostController', NewPostController);

  NewPostController.$inject = ['$rootScope', '$scope', 'Authentication', 'Snackbar', 'Posts'];

這是我的posts.module.js文件的摘要

  angular
    .module('thinkster.posts', [
      'thinkster.posts.controllers',
      'thinkster.posts.directives',
      'thinkster.posts.services'
    ]);


 angular
    .module('thinkster.posts.controllers', []);

這是身份驗證服務模塊的片段

  angular
    .module('thinkster.authentication.services')
    .factory('Authentication',Authentication);

  Authentication.$inject = ['$cookies','$http'];

  function Authentication($cookies,$http){
    var Authentication = {
      getAuthenticatedAccount: getAuthenticatedAccount,
      isAuthenticated: isAuthenticated,
      register:register,
      login : login,
      logout:logout,
      setAuthenticatedAccount: setAuthenticatedAccount,
      unAuthenticate: unAuthenticate
    };

    return Authentication;

    function getAuthenticatedAccount(){
      if (!$cookies.authenticatedAccount){
        return;
      }
      return JSON.parse($cookies.authenticatedAccount);
    }

以及身份驗證模塊的摘要

  angular
    .module('thinkster.authentication',[
      'thinkster.authentication.controllers',
      'thinkster.authentication.services'
    ]);

-最后，下面的thinkster模塊

angular
  .module('thinkster', [
    'thinkster.config',
    'thinkster.routes',
    'thinkster.authentication',
    'thinkster.layout',
    'thinkster.posts',
    'thinkster.utils'
  ]);

身份驗證服務正常運行，因為我能夠登錄和注銷該項目。 我在錯誤的位置找錯了嗎？

Answer 1

代碼段缺少NewPostController定義。 如果沒有看到該代碼，我可能會認為Authentication對象可能不會傳遞給函數。

function NewPostController($rootScope, $scope, Authentication, Snackbar, Posts) {
}

您可以使用NewPostController中的以下代碼查看Authentication對象上可用的方法：

for (var key in Authentication) {
    console.log(typeof Authentication[key], key);
}

如果該功能在對象上可用，則應該看到“函數getAuthenticatedAccount”。