Angular:通过rootScope分配和访问承诺

时间:2016-11-23 17:34:49

标签: angularjs

我想使用promise并通过rootScope访问它而不是使用return语句。我遇到的问题是,在我的决心结束之前,承诺会得到解决。在下面的代码中,我的ajax调用中的successFunction在我的defer.resolve()完成之前执行。无论如何,我可以让我的successFunction等到我的defer.resolve在app-directive完成之后?这是我的代码:

APP-directive.js

function(app) {
    app.directive('spinner', function ($uibModal, $timeout, $q) {
    return {
        restrict: 'E',
        replace: true,
        template: [
            '<div style="display:none;" class="modal-dialog">',
            '<div class="modal-header ng-scope" style="text-align: center;">',
            '   {{spinnerMessage}}',
            '</div>',
            '<div class="modal-body ng-scope">',
            '   <img class="spinner-image" ng-src="../../Content/img/spinner.gif" />',
            '</div>',
            '</div>'
        ].join(''),
        link: function (scope, element) {
            scope.$watch(function () {
                return scope.$root.loadMask
            }, function () {
                 if (scope.$root.loadMask == true) {
                    scope.spinnerModal = $uibModal.open({
                        template: element[0].innerHTML,
                        size: 'sm',
                        backdrop: 'static',
                        keyboard: 'false'
                    });
                 }
                 else {
                    var defer = $q.defer();
                    $timeout(function () {
                        defer.resolve(scope.spinnerModal.close())
                    }, 3000);

                    scope.$root.spinnerClosed = defer.promise;
                 }
            }, true);
}

ajaxService.js

app.register.service('ajaxService', ['$http', '$rootScope', function ($http, $rootScope) {
    this.AddUser = function (user, successFunction, errorFunction) {
        // Initialization
        $rootScope.loadMask = true;

        $http.post('Account/AddUser', user)
        .success(function (response, status, headers, config) {
            $rootScope.loadMask = false;
            $rootScope.spinnerClosed.then(function (result) {
                successFunction(response, status);
            });
        })
        .error(function (response, status) {
            $rootScope.loadMask = false;
            $rootScope.spinnerClosed.then(function (result) {
                errorFunction(response, status);
            });
        });
    }

2 个答案:

答案 0 :(得分:0)

AngularJS会在观察者注册后立即执行侦听器功能,因此,当您的服务调用spinnerClosed时,您的this.AddUser承诺可能已经解决。

您可以插入一个额外的检查,以查看是否将侦听器作为初始化的一部分进行调用。

  

在观察者注册观察者之后,异步调用侦听器fn(通过$ evalAsync)来初始化观察者。在极少数情况下,这是不合需要的,因为当watchExpression的结果没有改变时会调用监听器。要在侦听器fn中检测此场景,您可以比较newVal和oldVal。如果这两个值相同(===)则由于初始化而调用了监听器。

Angular JS API Reference / $rootScope.Scope

答案 1 :(得分:0)

我明白了。 AngularJS有一个.then方法,你使用它基本上是一个回调函数。

 $http.post('Account/AddUser', user)
     .then(
            function successCallback(response) {
                $rootScope.loadMask = false;
                successFunction(response, status);
            },
            function failureCallback(response) {
                $rootScope.loadMask = false;
                errorFunction(response, status)
            }
      );