Question

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

<body ng-controller="AppCtrl as app">

<!-- header -->
<div header></div>

<!-- content -->
<div ui-view=""></div>

<!-- FOOTER -->
<div footer></div>

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

Answer 1

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

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

然后根据评论使用ng-if（或ng-show）：

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

页脚也是如此。

Answer 2

不要使用ng-hide或控制器。 Ui-router具有内置的功能。根据您当前的状态，使用嵌套状态和嵌套视图显示/隐藏。看看这些链接：

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

Answer 3

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

Answer 4

请使用角度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-route甚至更好。

Angular JS / UI-Router：禁用给定状态的指令？

4 个答案: