Javascript AngularJS-基于角色的导航

我有一个使用RubyonRails的应用程序（用于身份验证/角色的designe/CanCan）和一个AngularJS客户端

我有3个角色-每个角色都有不同的导航菜单。我不希望有3个不同的视图和不同的导航栏-有没有一种方法可以根据加载的用户显示/隐藏导航元素

---

有人熟悉这个或者有什么好主意吗？我做了一些狩猎，但几乎没有成功。。。什么都行

您可以使用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>

---

在控制器中，您确定一些逻辑以显示基于角色的每个导航，然后返回真/假

我知道您已经给出了答案，但我想指出与性能相关的细微差别

根据菜单和HTML的大小，您可能希望在ng show之外使用ng if。ng show的问题是所有节点都被编译，即使是用户永远不会使用的节点。例如，管理器可能永远不会使用Admin或User节点，但它们仍然会被解析和编译

如果使用ng，则可以避免这种情况，并且仅在条件为true时渲染/编译片段。由于您总是使用同一个控制器，因此不必重复：

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

…管理导航。。。
…用户导航。。。

---

我们正在开发一个大规模的角度应用程序，像这样的小改动将获得巨大的性能优势。当“if”表达式失败时，该元素将从DOM中删除并且从未编译过，而ng show while将仍然编译该元素并将其隐藏。

谢谢Damon，这正是我想要的！真棒-在这种情况下，我希望我能有两个正确的答案！

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