Question

我有一个使用Ruby on Rails（Devise / CanCan for Authentication / Roles）和AngularJS客户端的应用程序。

我有3个角色 - 每个角色都有不同的导航菜单。我宁愿不使用不同的导航条有3种不同的视图 - 我是否可以根据加载的用户显示/隐藏导航元素？

任何熟悉此事或有任何好主意的人？我做了一些狩猎，但却没有成功......一切都有帮助！

Answer 1

我知道你已经标记了答案，但我想指出与表现有关的细微差别。

根据菜单和HTML的大小，您可能希望超越ng-show以使用ng-if。 ng-show的问题在于所有节点都被编译，甚至是用户永远不会使用的节点。例如，Manager可能永远不会使用Admin或User节点，但仍然会对它们进行解析和编译。

如果你使用ng-if你可以避免这种情况，只在条件为真时才渲染/编译片段。由于您总是要使用相同的控制器，因此您不必重复它：

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

我们正在进行大规模的Angular应用程序，这样的小改动可以获得主要的性能优势。当“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>

..控制器

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

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

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

在您的控制器中，您确定一些逻辑，以根据角色显示每个导航，然后返回true / false。

AngularJS - 基于角色的导航

2 个答案: