Brandon Brandon - 1 year ago 37
AngularJS Question

Multiple instances of directive, wait for $http calls to complete

I have a simple directive that transcludes an ng-if on its element/attribute to hide it based on the response from an $http call:

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


The authorizationService call gets a list of groups that the current user is a member of and caches it in session storage. This works great except when there are many of these directives on a page it calls the $http service a bunch of times before the first one returns and caches the results.

My question is, is there a way to tell subsequent calls from multiple instances of a directive to wait for the response of the first call?

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

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

       return promise;
   }
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download