Question

我是AngularJS的新手，并且有一个加载我初始用户配置的服务

angular.module('myApp').service('myService', ['$http', function ($http) {
    var self = this;
    self.user = {};

    self.loadConfiguration = function () {
        $http.get('/UserConfig').then(function (result) {
            self.user = result.data;
        });
    };

    self.loadConfiguration();
}]);

我有一个使用此服务配置的控制器

angular.module('myApp').controller('myController', ['$scope', 'myService', function ($scope, myService) {
    var self = this;

    // calculation based on service value
    self.something = myService.user.something * something else;
}]);

这里的问题是myService.user.something可能是未定义的，因为调用此代码时AJAX请求可能尚未完成。有没有办法在任何其他代码运行之前完成服务？我希望服务函数'loadConfiguration'只运行一次，而不管依赖它的控制器的数量。

Answer 1

您可以在.run()功能

中调用您的服务方法

运行阻止

运行块是Angular中最接近主要的东西   方法。运行块是需要运行以启动它的代码   应用。它在所有服务完成后执行   已配置且已创建进样器。通常运行块   包含难以进行单元测试的代码，因此应该是   在隔离模块中声明，以便在它们中可以忽略它们   单元测试。

https://docs.angularjs.org/guide/module

angular.module('myApp').run(function()){
   //use your service here
}

处理ajax延迟的一种方法是在$ http.success上使用$rootScope.$broadcast()函数，它会将自定义事件广播到所有控制器。 Antoher的方法是使用promises并在解析后在控制器中执行操作。以下是一些想法：https://groups.google.com/forum/#!topic/angular/qagzXXhS_VI/discussion

Answer 2

如果您想确保在AJAX调用返回后控制器中的代码被执行，您可以使用事件。

在您的服务中使用此功能：

angular.module('myApp').service('myService', ['$http', '$rootScope', function ($http, $rootScope) {
    var self = this;
    self.user = {};

    self.loadConfiguration = function () {
        $http.get('/UserConfig').then(function (result) {
            self.user = result.data;
            $rootScope.$broadcast('myService:getUserConfigSuccess');
        });
    };

    self.loadConfiguration();
}]);

在您的控制器中：

angular.module('myApp').controller('myController', ['$scope', 'myService', function ($scope, myService) {
    var self = this;

    $scope.$on('myService:getUserConfigSuccess', function() {
        // calculation based on service value
        self.something = myService.user.something * something else;
    })
}]);

您甚至可以将对象附加到事件中。

请参阅https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope。

AngularJS在其他函数之前运行服务函数

2 个答案: