javascript - AngularJS - 基于 Angular 色的导航

Question

我有一个使用 Ruby on Rails 的应用程序(Devise/CanCan 用于身份验证/Angular 色)和一个 AngularJS 客户端。

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

有熟悉这方面的人或有什么好的想法吗？我做了一些狩猎，但几乎没有成功......任何有帮助的东西!

Answer 1

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

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

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

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

我们正在处理一个庞大的 Angular 应用程序，像这样的小改动可以获得重大的性能优势。当“if”表达式失败时，该元素将从 DOM 中删除并且永远不会编译，而 ng-show while 仍将编译该元素并简单地隐藏它。