Javascript 执行工厂时出现Angularjs错误

我是新的Angularjs开发者。我想使用PHP的身份验证创建登录页面，当我提交表单时，它运行$scope.login代码

我有这样的角度代码

var module = angular.module('figi-login', ['onsen']);

          module.controller('AppController', function($scope) { });
          module.controller('PageController', 
          ['$scope', '$rootScope', '$location', 'AuthenticationService',
          function($scope,$http,$location, AuthenticationService) {
            ons.ready(function() {
                // AuthenticationService.ClearCredentials();
                $scope.formData = {};

                $scope.login = function(){
                    AuthenticationService.Login($scope.formData)
                        .success(function(data){
                            alert(data);
                        });
                };
            });

          }]).factory('AuthenticationService',
          ['$http','$rootScope',
            function($http,$rootScope){
                var service = {};

                service.Login = function(formData){
                    return $http({
                        method  : 'POST',
                        url     : 'http://10.0.2.2/demo/api/login.php',
                        data    : $.param(formData),
                        headers : {'Content-Type':'application/x-www-form-urlencoded'}
                    });

                };
          }]);

当登录被执行时，它应该在工厂中调用service.login。我得到这样的错误

var module = angular.module('figi-login', ['onsen']);

          module.controller('AppController', function($scope) { });
          module.controller('PageController', 
          ['$scope', '$rootScope', '$location', 'AuthenticationService',
          function($scope,$http,$location, AuthenticationService) {
            ons.ready(function() {
                // AuthenticationService.ClearCredentials();
                $scope.formData = {};

                $scope.login = function(){
                    AuthenticationService.Login($scope.formData)
                        .success(function(data){
                            alert(data);
                        });
                };
            });

          }]).factory('AuthenticationService',
          ['$http','$rootScope',
            function($http,$rootScope){
                var service = {};

                service.Login = function(formData){
                    return $http({
                        method  : 'POST',
                        url     : 'http://10.0.2.2/demo/api/login.php',
                        data    : $.param(formData),
                        headers : {'Content-Type':'application/x-www-form-urlencoded'}
                    });

                };
          }]);

TypeError:无法读取未定义的属性“Login”

---

我的代码怎么了

您忘记在AuthenticationService工厂中返回

服务

：

.factory('AuthenticationService',
      ['$http','$rootScope',
        function($http,$rootScope){
            var service = {};

            service.Login = function(formData){
                return $http({
                    method  : 'POST',
                    url     : 'http://10.0.2.2/demo/api/login.php',
                    data    : $.param(formData),
                    headers : {'Content-Type':'application/x-www-form-urlencoded'}
                });
            };
            return service;  //this line is missing
      }])

请参见工厂末尾的注释行：

.factory('AuthenticationService',
      ['$http','$rootScope',
        function($http,$rootScope){
            var service = {};

            service.Login = function(formData){
                return $http({
                    method  : 'POST',
                    url     : 'http://10.0.2.2/demo/api/login.php',
                    data    : $.param(formData),
                    headers : {'Content-Type':'application/x-www-form-urlencoded'}
                });
            };
            return service;  //this line is missing
      }])

---

您需要像这样重新编写您的工厂：

.factory('AuthenticationService',
      ['$http','$rootScope',
        function($http,$rootScope){
            return{   //The return will make your function available in the controller
              Login: function(formData){
                  return $http({
                      method  : 'POST',
                      url     : 'http://10.0.2.2/demo/api/login.php',
                      data    : $.param(formData),
                      headers : {'Content-Type':'application/x-www-form-urlencoded'}
                  });
               };
           }
}]);

此外，您还可以编写it服务样式：

.service('AuthenticationService',
      ['$http','$rootScope',
        function($http,$rootScope){
            this.Login = function(formData){
                return $http({
                    method  : 'POST',
                    url     : 'http://10.0.2.2/demo/api/login.php',
                    data    : $.param(formData),
                    headers : {'Content-Type':'application/x-www-form-urlencoded'}
                });
            };
}]);

这两种写操作都比较传统。您可以通过以下方式调用其中一个：

AuthenticationService.Login($scope.formData)