AngularJS Role Based Navigation

Question

I'm using angular to build a small web application. I'm trying to set up role based navigation. It seems as if the isAdmin function is not getting called on page load, as I can just see the foo anchor tag.

HTML

<body ng-controller='AccountController'>
    <nav class="navbar navbar-default">
      <ul>
          <li><a href='google.com'>foo</a></li>
          <li ng-if="isAdmin()"><a href='google.com'>bar</a></li>
      </ul>
    </nav>
</body>

AccountController

var app = angular.module('appControllers', []);

app.controller = angular.controller('AccountController', ['$scope', 
function($scope, $http) {
    $scope.isAdmin = function() {
        return true; //Just as a test to make sure it works
    }
}]);

Ideally this will hit a web service that will return the administrator status, but for now I'd like to get this to work.

Thanks for all the help in advance,

Andres

Refer to - arthur.gonigberg.com/2013/06/29/angularjs-role-based-auth — divyenduz
– divyenduz, Commented Oct 6, 2014 at 20:15
You sure that there can't be an error in the JS you didn't show us? :) Are there any JS Errors? — malifa
– malifa, Commented Oct 6, 2014 at 20:26
@AndresL Are you positive there are no console errors? I would expect at least a type error along the lines of undefined is not a function (Chrome). Is your isAdmin function declared anywhere else on your scope? — Matt
– Matt, Commented Oct 6, 2014 at 21:37
@AndresL Your code appears to work for the most part for me... see: this plunker . All that I did was change the controller declaration and inject the missing $http. It appears that you only want this item to generate based on your ng-if condition. Am I mis-understanding your question? — Matt
– Matt, Commented Oct 8, 2014 at 20:52

Artemis · Accepted Answer · 2014-10-06 22:13:33Z

1

In your example you need to remove braces to make it work. But I usually use custom directive to make it work. Example:

<div class="somediv" show-for-role="ROLE_A,ROLE_B"></div>

And if your user has some of these roles your can manage it.

appModule.directive('manageAccess', ['someState', function (appState) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var user = someState.currentUser;
      scope.$watch(someState.watchCurrentUser, function(n,o){
         if (n === o){
           return;
         }
        hideShow(element,attrs,n);
      });
      hideShow(element,attrs,user);
    }
  }

var hideShow = function(element,attrs,user){
element.hide();
if (user) {
  var role = attrs.showForRole;
  if (role){
    role.split(',').forEach(function(it){
      if (it == user.role){
        element.show();
      }
    })
  }
}};

answered Oct 6, 2014 at 22:13

Artemis

4,8613 gold badges23 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

AndresL Over a year ago

I have yet to use a custom directive, so this should be an adventure. I'll give it a try tomorrow when I get back into work. I'll post an update then, thanks Artemis

Sébastien · Accepted Answer · 2014-10-06 21:15:34Z

0

Try to remove extra '()' after 'isAdmin' like that :

function($scope, $http) {
    $scope.isAdmin = function() {
        return true; //Just as a test to make sure it works
    }
}

Hope it helps...

answered Oct 6, 2014 at 21:15

Sébastien

3412 silver badges10 bronze badges

2 Comments

Sébastien Over a year ago

Your welcome. Don't forget to mark the response in the case of someone else get the same issue as you ! Let me know if it works

AndresL Over a year ago

I mistyped it, I had already removed the parentheses.. I'll edit the question.

Collectives™ on Stack Overflow

AngularJS Role Based Navigation

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related