Question

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

TypeError：无法读取属性＆＃39;登录＆＃39;未定义的

我的代码出了什么问题？

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

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

执行工厂时Angularjs错误

2 个答案: