Angular JS/UI Router:为给定状态禁用指令

Angular JS/UI-Router: disable directives for a given state?

本文关键字：状态 指令 JS UI Router Angular      更新时间：2023-09-26

我有一个使用UI路由器的Angular 1.3应用程序。我有一个页面视图，一个页眉指令和另一个页脚指令。

<body ng-controller="AppCtrl as app">
<!-- header -->
<div header></div>
<!-- content -->
<div ui-view=""></div>
<!-- FOOTER -->
<div footer></div>

我的应用程序中有一些状态不想显示页眉和/或页脚。这是怎么做到的？

在控制器中实现一个方法，该方法决定标头在给定状态下是否可见，例如

.controller('AppCtrl', function() {
    this.isHeaderVisible = function() {
        return ...// your logic here
    }
});

然后使用ng-if（或根据注释使用ng-show）：

<div header ng-if="app.isHeaderVisible()"></div>

页脚也是如此。

不要使用ng隐藏或控制器。Ui路由器有一个内置的功能。使用嵌套状态和嵌套视图可以根据您当前的状态显示/隐藏。看看这些链接：

  • https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-嵌套视图
  • https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views.

设置一个plunker，我帮你让它工作。

如果您对状态使用单独的控制器，您可以在每个控制器中设置布尔范围变量，然后使用这些和ng-show来控制显示的内容。

请使用角度ui-router！！！

这是一种很好的风格来组织你的观点：

文件：https://github.com/angular-ui/ui-router

示例：http://angular-ui.github.io/ui-router/sample/#/

Controllers + ng-hide不适合处理嵌套视图，因为DOM加载过多。因此，ui-route被开发出来做这件事。虽然ng-hide可以做这件事情，但ui路由甚至更好。

相关文章：