AngularJS - Навигация на основе ролей

Question

У меня есть приложение, использующее Ruby on Rails (Devise/CanCan для проверки подлинности/роли) и клиент AngularJS.

У меня есть 3 роли - каждый с различными навигационными меню. Я бы предпочел не иметь 3 разных вида с разными навигационными барами - есть ли способ показать/скрыть элементы навигации на основе того, какой пользователь загружен?

Кто-нибудь знаком с этим или имеет хорошие идеи? Я сделал какую-то охоту, но придумал немного успеха. Ничего не помогает!

Answer 1

Я знаю, что вы уже отметили ответ, но я хотел указать на нюанс, связанный с производительностью.

В зависимости от размера вашего меню и HTML вы можете выйти за пределы ng-show, чтобы использовать ng-if. Проблема с ng-show заключается в том, что все узлы скомпилированы, даже те, которые пользователь никогда не будет использовать. Например, Менеджер никогда не может использовать узлы администратора или пользователя, но они все еще разобраны и скомпилированы.

Если вы используете ng - если вы можете избежать этого и только визуализировать/компилировать фрагменты, когда условие истинно. Так как вы всегда будете использовать тот же контроллер, вы не должны повторять:

<div ng-controller="AccountController"> 
<div ng-if="IsAdmin()">...admin nav...</div> 
<div ng-if="IsUser()">...user nav...</div> 
</div> 

Мы на массивном углового применение и небольшие изменения, как это пожинать основные преимущества в производительности. Когда выражение «if» терпит неудачу, элемент удаляется из DOM и никогда не компилируется, а также ng-show, пока он все еще компилирует элемент и просто скрывает его.

Answer 2

Вы можете использовать тег ng-show.

Вы будете делать что-то вроде этого:

<div ng-show="IsAdmin()" ng-controller="AccountController" >...admin nav...</div> 
<div ng-show="IsUser()" ng-controller="AccountController" >...user nav...</div> 
<div ng-show="IsManager()" ng-controller="AccountController" >...manager nav...</div> 

..Controller

$scope.IsAdmin = function(){ 
    return $scope.UserRole == "Admin"; 
} 

$scope.IsUser = function(){ 
    return $scope.UserRole == "StandardUser"; 
} 

$scope.IsManager = function(){ 
    return $scope.UserRole == "Manager"; 
} 

В контроллере вы определить, какая-то логика, чтобы показать каждому Нав основаны от роли затем возвращают истина/ложь.