类型错误：Main.login不是一个函数 [英] TypeError: Main.login is not a function

问题描述

我想实现<一个href=\"http://$c$c.tutsplus.com/tutorials/token-based-authentication-with-angularjs-nodejs--cms-22543\"相对=nofollow>这个的例子，我的项目。你可以看到前端侧code 这里。

I am trying to implement this example to my project. you can see the front-end side code here.

这是我的控制器

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

下面是我厂的服务

below is my factory service

(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();
                }
            };
        }
    ]);
})();

，你可以看到我复制并通过文字从示例字粘贴和只是改变了应用程序的名称和控制器名称。

as you can see I copied and pasted from the example word by word and just changed the app name and controller name.

但我得到下面这个错误：

but I get this error below:

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功能。我不明白为什么它不能找到它。

I mean, There IS Main.login function. I don't see why it cant find it.

推荐答案

这是因为主是不是你认为它是。当您使用显式依赖注入注释，你需要确保秩序和依赖条件的数量并注入参数相同。

That is because Main is not what you think it is. When you use explicit dependency injection annotation you need to make sure order and number of dependecies and injected arguments are same.

.controller('authCtrl',

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

如果你看你有没有注入的变量范围的额外 rootScope 的依赖，因此，所有余下的参数被转移。因此，主变量实际持有 $位置对象。如果有疑问可以随时重新验证您的参数列表，并做控制台日志记录。正确的缩进也有助于情况下，你有很多的注入参数。

if you see you have an extra rootScope dependency injected to variable scope, so all the remaining arguments gets shifted. So Main variable actually holds $location object. When in doubt you can always reverify your argument list and do console logging. Proper indentation also helps in cases you have lots of arguments injected.

删除 $ rootScope 形成注射服务，您应该罚款。

Remove $rootScope form the injection list and you should be fine.

这篇关于类型错误：Main.login不是一个函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！