Question

我有一个简单的指令，在其元素/属性上转换ng-if，根据$ http调用的响应隐藏它：

 app.directive('showFor',
[
    'authorizationService', function(authorizationService) {
        return {
            restrict: 'EA',
            template: '<show-for-transclude ng-if="show"></show-for-transclude>',
            transclude: true,
            scope: { process: '@' },
            link: function(scope, element, attrs, ctrl, transclude) {
                var process = scope.process || attrs.process;

                if (!_.isUndefined(attrs.showFor) && !_.isEmpty(attrs.showFor)) {
                    process = attrs.showFor;
                    authorizationService
                        .Authorize(process)
                        .then(function(result) {
                            scope.show = result;
                        });
                }
            }
        };
    }
]);

authorizationService调用获取当前用户所属的组列表，并将其缓存在会话存储中。这很有效，除非在第一个返回并缓存结果之前在页面上有许多这样的指令它多次调用$ http服务。

我的问题是，有没有办法告诉多个指令实例的后续调用等待第一次调用的响应？

Answer 1

app.service('Auth', function($http) {
   var promise;

   this.authorize = function() {
       if (!promise) {
         promise = $http.post('/myauth/...');
       }

       return promise;
   }
});

Answer 2

您应该使用promise使其同步工作。 https://docs.angularjs.org/api/ng/service/ $ Q

功能提交（数据）{

        var deferred = $q.defer();
        $http({
            method: "POST",
            url: "/YourAPI/Method",
            data: Data
        })
       .then(function (response) {
           deferred.resolve(response);

       }).catch(function (error) {
           deferred.reject(error);
       });
        return deferred.promise;
    }

多个指令实例，等待$ http调用完成

2 个答案: