AngularJS - Role Based Navigation
angularjs, javascript
Solution
I know you already marked an answer but I wanted to point out a nuance related to performance.
Depending on the size of your menu and HTML you might want to go beyond ng-show to use ng-if. The problem with ng-show is that all of the nodes are compiled, even the ones the user will never use. For example, a Manager may never use the Admin or User nodes but they are still parsed and compiled.
If you use ng-if you can avoid that and only render/compile the fragments when the condition is true. Since you are always going to use the same controller, you wouldn't have to repeat it:
<div ng-controller="AccountController">
<div ng-if="IsAdmin()">...admin nav...</div>
<div ng-if="IsUser()">...user nav...</div>
</div>
We are on a massive Angular application and small changes like this reap major performance benefits. When the "if" expression fails, the element is removed from the DOM and never compiled, vs. ng-show while will still compile the element and simply hide it.
Problem
I have a application using Ruby on Rails (Devise/CanCan for Authentication/Roles) and a AngularJS client. I have 3 roles - each with different navigation menus. I'd rather not have 3 different views with different navigation bars- is there a way I can show/hide navigation elements based on which user is loaded? Anyone familiar with this or have any good ideas? I did some hunting but came up with little to no success... Anything helps!