Question

我是angularJS的新手。我试图将服务分成我的应用程序中的单独文件。一切正常，但是当我尝试将工厂对象注入控制器时，它无法正常工作。以下是代码

这是app文件
app.js

'use strict';

var app = angular.module('myApp', ['ngRoute']);  
app.config(function ($routeProvider, $controllerProvider,

          $compileProvider, $filterProvider, $provide) {
app.controllerProvider = $controllerProvider;
app.compileProvider = $compileProvider;
app.routeProvider = $routeProvider;
app.filterProvider = $filterProvider;
app.provide = $provide;


app.routeResolver = function (basePath, viewName,controllerName, isSecure) {
    var routeConf =
        {
            templateUrl: 'Views/' + basePath + viewName + '.html',
            controller: controllerName + 'Controller',
            secure: isSecure ? isSecure : false,
            resolve: {
                deps: function ($q, $rootScope) {
                    var deferred = $q.defer();
                    var dependencies =
                    [
                        'Controllers/' + basePath + controllerName + 'Controller.js',
                    ];

                    require(dependencies, function () {
                        $rootScope.$apply(function () {
                            deferred.resolve();
                        });
                    });

                    return deferred.promise;
                }
            }
        }
    return routeConf;

}

$routeProvider
.when('/', {})
.when('/Admin', app.routeResolver('Admin/', 'Admin','Admin'))
.when('/Customer', app.routeResolver('Customer/', 'Customer','Customer'))
.when('/Teller', app.routeResolver('Teller/', 'Teller','Teller'))
.when('/Finance', app.routeResolver('Finance/', 'Finance','Finance'))   
.otherwise({ redirectTo: '/' });
});

这是我的工厂
AuthenticationService.js

'use strict';

app.factory('authenticationService', ['$scope', 'httpService', function ($scope,      httpService) {

return {
    authenticateUser: function () {
        if (!$scope.userName && !$scope.keyWord) {
            var result = httpService.postService(
                 {
                     username: $scope.userName,
                     keyword: $scope.keyWord
                 }, "../api/authenticateUser");
            result.then(successCall, errorCall);
        }
    }
}

successCall =function(dataObject) {

}

errorCall = function (dataObject) {

}

}]);

这是我的控制器
LoginController.js

'use strict';

app.controller('LoginController', ['$scope','authenticationService',  function ($scope, authenticationService) {

$scope.ValidateLogin = function () {
    var result = window.confirm("Validate Login Called for the user :" + $scope.userName);
    var result1 = authenticationService.authenticateUser();

}
}]);

当我没有注入身份验证服务时，logincontroller工作正常。但是，当我尝试注入身份验证服务时，它无法正常工作。我在做什么？对你的帮助表示感谢。提前谢谢。
注意：我也尝试将其创建为服务。这仍然不起作用。

Answer 1

虽然不建议您访问工厂和服务中的$ scope，但可以使用angular.element(ELEMENT).scope()。

但最好让您的身份验证服务接受用户名和密码，并假设其当前范围无法使其可重复使用：

authenticateUser: function (username, password) {
    ...... // 
    return result.then(successCall, errorCall); // return the promise 
}

然后在你的控制器中：

$scope.ValidateLogin = function () {
 ....//
     authenticationService.authenticateUser($scope.username, $scope.password)
         .then(function(response){
          // deal with the response here
          });

}

Answer 2

这里的基本问题是您的工厂未正确初始化。工厂定义不正确，因为您使用的是$scope。 $scope不是服务，而是对象。 $scope对象绑定到某些html元素/上下文。我们可以将$scope与控制器一起使用，因为Injector在解析html元素时使用$scope初始化控制器。控制器与html元素相关联，因此Injector知道控制器的$scope。但服务/工厂是单件对象。所以你不能在这里注入$scope。

如需进一步说明，请参阅 Injecting $scope into an angular service function()

使用以下代码可以解决您的问题。我假设您已经定义了httpsService。

app.factory('authenticationService', ['httpService', function (httpService) {

return {
    authenticateUser: function (context) {
        if (!context.userName && !context.keyWord) {
            var result = httpService.postService(
                 {
                     username: context.userName,
                     keyword: context.keyWord
                 }, "../api/authenticateUser");
            result.then(successCall, errorCall);
        }
    }
}

app.controller('LoginController', ['$scope','authenticationService',  function ($scope, authenticationService) {

$scope.ValidateLogin = function () {
    var result = window.confirm("Validate Login Called for the user :" + $scope.userName);
    var result1 = authenticationService.authenticateUser($scope);

}
}]);

Answer 3

您的服务中存在吊装问题：

'use strict';

app.factory('authenticationService', ['$scope', 'httpService', function ($scope,      httpService) {

//define them here before the return, if not, they won't be defined
var successCall =function(dataObject) {

}

var errorCall = function (dataObject) {

}

return {
    authenticateUser: function () {
        if (!$scope.userName && !$scope.keyWord) {
            var result = httpService.postService(
                 {
                     username: $scope.userName,
                     keyword: $scope.keyWord
                 }, "../api/authenticateUser");
            result.then(successCall, errorCall);
        }
    }
}

}]);

工厂没有注入控制器 - angularJS

3 个答案: