Accessing Service Data from Directive - angularjs

Question

I am trying to show or hide the HTML elements based on spring security roles using Angular JS.
For this, I have created a service and directive.
I am getting data back from the server but I am not able to access the data that I got in service. Here is my code
app.service('MyService', function($http, $rootScope) {
this.data = [];
var _this = this;
$http.get('permissions').then(function data(response) {
_this.data=response.data;
console.log(response);
$rootScope.$broadcast('MyServiceReady');
})
/* return {
permissionData: function(){
return _this.data;
}
}*/
})
app.directive('allowed', [ 'MyService', function(MyService) {
return function(scope, element, attr) {
scope.$on('MyServiceReady', function() {
$subScope = this;
$subScope.status = false;
$subScope.permissions=MyService.data;
console.log(MyService.data);
console.log("First:" + $subScope.status+" permission:"+attr.allowed);
angular.forEach(permissions, function(item) {
if (angular.equals(item, attr.allowed)) {
$subScope.status = true;
}
});
console.log("last:" + $subScope.status);
console.log(element);
if (!$subScope.status) {
$(element).hide();
} else {
$(element).show();
}
});
};
} ]);
I tried to write a function inside the service and access it but even then it is showing MyService.permissionData is not a function.
Can anyone explain where I am going wrong?
I am trying to perform three tasks in the above code.
Get the Permissions array from the server
Dont create the directive till you get data.
hide or show elements based on permission.
My HTML code for this is:
<button class="btn btn-primary" allowed="1002">ADD SOMETHING</button>
Please do reply if you got any suggestions.

Answer 1

Try removing MyService from these two lines:
return function(scope, element, attr, MyService) {
scope.$on('MyServiceReady', function(MyService) {
You've already injected MyService into your directive, you don't pass it on the link function or your event handler.
Now that you've fleshed out what it is you're trying to do in your question I think I have a better answer for you to look at. If I'm reading this right, you are getting an array of integers that correspond to the allowed attribute on your buttons. If the array doesn't contain the value in allowed then the button should not be visible.
Here is a new version of your directive:
.directive('allowed', function(MyService) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$on('MyServiceReady', function() {
var allowed = false;
angular.forEach(MyService.data, function(item) {
if(attrs.allowed === item){
allowed = true;
}
});
if(!allowed){
element.addClass('hidden');
}
});
}
}
})
This requires a hidden class in your CSS with display: none;. Here's a working JSFiddle to illustrate the directive. I had to fake the $http call to your API. A downside to this approach is that the buttons are visible while the service is calling your API. It might be better to hide them by default and then show them if the user is allowed instead of vice versa.