Question

如果在GitHub上找到，我决定将我的AngularJS项目建立在angular-seed上。但我尝试从我的控制器调用工厂时遇到问题。

我有这样的控制器：

(function() {
    'use strict';

    angular.module('myApp.authentication', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/authentication', {
            templateUrl: 'views/authentication/authentication.partial.html',
            controller: 'AuthenticationCtrl',
            controllerAs: 'vm',
            bindToController: true
        });
    }])

    AuthenticationCtrl.$inject = ['authenticationService']

    .controller('AuthenticationCtrl', [function(authenticationService) {

        var vm = this;
        vm.login = function() {
           var all =  authenticationService.getAll();
            console.log("login" + all)
        }

    }]);
})();

因此，当vm.login()被触发时，我想调用authenticationService.getAll();从我的服务中获取数据，如下所示：

(function () {
    'use strict';

    angular
        .module('myApp')
        .factory('authenticationService', authenticationService);

    function authenticationService() {
        var service = {
            getAll: getAll
        };

        return service;

        function getAll() {
            return [
                {first: 'Alan', last: 'Dex', lunchMoney: 123},
                {first: 'Ada', last: 'True', lunchMoney: 82},
                {first: 'Adam', last: 'Mc Donald', lunchMoney: 122},
                {first: 'Anthony', last: 'Heys', lunchMoney: 322},
                {first: 'Pamela', last: 'Anders', lunchMoney: 422}
            ];

        }
    }
})();

但是我得到了以下错误Uncaught ReferenceError: AuthenticationCtrl is not defined那是因为我试图将工厂注入尚未创建的控制器中吗？如果是这样我该怎么写这篇文章？

Answer 1

对控制器进行以下更改：

(function() {
    'use strict';

    angular.module('myApp.authentication', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/authentication', {
            templateUrl: 'views/authentication/authentication.partial.html',
            controller: 'AuthenticationCtrl',
            controllerAs: 'vm',
            bindToController: true
        });
    }])

    .controller('AuthenticationCtrl', AuthenticationCtrl);

    AuthenticationCtrl.$inject = ['authenticationService']

   function AuthenticationCtrl(function(authenticationService) {

        var vm = this;
        vm.login = function() {
           var all =  authenticationService.getAll();
            console.log("login" + all)
        }

    });
})();

实际上，在定义控制器之前，您正试图向控制器注入服务。当它试图注入服务时，它找不到控制器。

谢谢＆amp;干杯

Answer 2

如果要将控制器显式定义为函数，则需要像这样编写它：

    function AuthenticationCtrl (authenticationService) {

            var vm = this;
            vm.login = function() {
               var all =  authenticationService.getAll();
                console.log("login" + all)
            }

        };

AuthenticationCtrl.$inject = ['authenticationService'];
angular.module('myApp.authentication')
  .controller('AuthenticationCtrl', AuthenticationCtrl);

我建议以这种方式编写依赖项：

.controller('AuthenticationCtrl', ['authenticationService', function(authenticationService) {

    var vm = this;
    vm.login = function() {
       var all =  authenticationService.getAll();
        console.log("login" + all)
    }

}]);

似乎更易读，代码更少

将Angular工厂注入控制器

2 个答案: