Calling a rest service only once in angularjs directive - angularjs

Question

We have menu's that can be displayed based on the role. I made the directive for this feature. But the problem is everytime I call the directive its calling rest service. I want to be able to call it only once and save the features that can be accessed for the current role and decide either hide it or show. Below is currently what I have:
var app = angular.module('myApp', []);
app.service('authService', function(){
var user = {};
user.role = 'guest';
return{
getFeature: function(){
//rest service call
return featureList;
},
}
});
app.directive('restrict', function(authService){
return{
restrict: 'A',
prioriry: 100000,
scope: false,
compile: function(element, attr, linker){
var accessDenied = true;
var featureList = authService.getFeature();
featureList.then(function(result){
featureList = result;
var attributes = attr.access.split(" ");
for(var i in featureList){
if(featureList[i] == attributes[0]){
accessDenied = false;
}
}
if(accessDenied){
element.children().remove();
element.remove();
}
});
}
}
});
Is there anyway I can call rest service only once not with every directive call?

Answer 1

One possibility is to cache the result from the service call, like so
app.service('authService', function($q) {
var user = {};
var cache;
user.role = 'guest';
return {
getFeature: function() {
if (cache) {
return $q.when(cache);
} else {
//rest service call
return featureList.then(function(val) {
cache = val;
return val;
});
}
}
}
});
You'll only make the call once (as long as the result is truthy), after that you'll just be returning the cache.
Might want to consider how to invalidate the cache at some point, depending on the apps needs.
Edit
As per comments, previous solution would allow multiple calls while waiting for the promise to resolve.
This approach will always return one singular promise, which itself does the single rest call.
app.service('authService', function($http) {
var user = {};
var prom;
user.role = 'guest';
return {
getFeature: function() {
if (!prom) {
prom = $http.get(/rest/).then(function(result) {
return result.data;
});
}
return prom;
}
}
});