执行工厂时出现Angularjs错误答案

【问题标题】：Angularjs error when executing factory执行工厂时出现Angularjs错误
【发布时间】：2014-10-30 03:27:41
【问题描述】：

我是新的 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 in factory。我得到这样的错误

TypeError：无法读取未定义的属性“登录”

我的代码有什么问题？

【问题讨论】：

标签： javascript php angularjs

【解决方案1】：

您忘记在 AuthenticationService 工厂中返回service：

return service;

查看工厂末尾的注释行：

.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
      }])

【讨论】：

【解决方案2】：

你需要像这样重写你的工厂：

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

或者，你可以写成服务风格：

.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)

【讨论】：