javascript - TypeError : Main. 登录不是函数

Question

我正在尝试在我的项目中实现 this 示例。可以看到前端侧代码 here 。

这是我的 Controller

(function(){
'use strict';
/* authentication Controllers */

var app = angular.module('pook');
    app.controller('authCtrl',['$http','$rootScope', '$scope', '$location', '$localStorage', 'ngToast', 'Main', function($http, $scope, $location, $localStorage, ngToast, Main){
        $scope.login = function(){
            var formData = {
                username: $scope.username,
                password: $scope.password
            };
      Main.login(formData, function(res) {
          if (res.type == false) {
              alert(res.data)    
          } else {
              $localStorage.token = res.data.token;
              window.location = "/";    
          }
      }, function() {
          $rootScope.error = 'Failed to signin';
      });
        }
    }]);
})();

下面是我的工厂服务

(function(){
    'use strict';
    var app = angular.module('pook')
        app.factory('Main', ['$http', '$localStorage', function($http, $localStorage){
            var baseUrl = "127.0.0.1:3000/api";
            function changeUser(user) {
                angular.extend(currentUser, user);
            }

            function urlBase64Decode(str) {
                var output = str.replace('-', '+').replace('_', '/');
                switch (output.length % 4) {
                    case 0:
                        break;
                    case 2:
                        output += '==';
                        break;
                    case 3:
                        output += '=';
                        break;
                    default:
                        throw 'Illegal base64url string!';
                }
                return window.atob(output);
            }

            function getUserFromToken() {
                var token = $localStorage.token;
                var user = {};
                if (typeof token !== 'undefined') {
                    var encoded = token.split('.')[1];
                    user = JSON.parse(urlBase64Decode(encoded));
                }
                return user;
            }

            var currentUser = getUserFromToken();

            return {
                save: function(data, success, error) {
                    $http.post(baseUrl + '/users', data).success(success).error(error)
                },
                login: function(data, success, error) {
                    $http.post(baseUrl + '/login', data).success(success).error(error)
                },
                me: function(success, error) {
                    $http.get(baseUrl + '/me').success(success).error(error)
                },
                logout: function(success) {
                    changeUser({});
                    delete $localStorage.token;
                    success();
                }
            };
        }
    ]);
})();

如您所见，我逐字复制并粘贴了示例，只是更改了应用程序名称和 Controller 名称。

但我收到以下错误:

TypeError: Main.login is not a function
    at Scope.$scope.login (http://127.0.0.1:3000/js/controllers/auth.js:15:12)
    at $parseFunctionCall (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:12404:18)
    at ngEventDirectives.(anonymous function).compile.element.on.callback (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:21566:17)
    at Scope.$get.Scope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:14466:28)
    at Scope.$get.Scope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:14565:23)
    at HTMLFormElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js:21571:23)
    at HTMLFormElement.jQuery.event.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js:4435:9)
    at HTMLFormElement.jQuery.event.add.elemData.handle (https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.js:4121:28)

我的意思是，有 Main.login 函数。我不明白为什么它找不到它。

Answer 1

那是因为 Main 并不是你想象的那样。当您使用显式依赖项注入(inject)注释时，您需要确保依赖项和注入(inject)参数的顺序和数量相同。

.controller('authCtrl',

     ['$http','$rootScope', '$scope', '$location', '$localStorage', 'ngToast', 'Main', 
                ^^^____
    function($http, $scope, $location, $localStorage, ngToast, Main)

如果您发现有一个额外的 rootScope 依赖项注入(inject)到变量作用域中，那么所有剩余的参数都会被转移。所以 Main 变量实际上保存 $location 对象。如有疑问，您可以随时重新验证您的参数列表并进行控制台日志记录。如果您注入(inject)了大量参数，适当的缩进也会有所帮助。

从注入(inject)列表中删除 $rootScope 就可以了。