Angular JS / UI-Router：禁用给定状态的指令？
[英]Angular JS/UI-Router: disable directives for a given state?
问题描述
我有一个使用UI路由器的Angular 1.3应用程序。 我有一个页面的视图和标题的指令和页脚的另一个。
<body ng-controller="AppCtrl as app">
<!-- header -->
<div header></div>
<!-- content -->
<div ui-view=""></div>
<!-- FOOTER -->
<div footer></div>
我的应用程序中有一些状态，我不想显示页眉和/或页脚。 怎么做的？
4 个解决方案
解决方案1
1 2015-03-31 14:27:02
在控制器中实现一个方法，用于确定标头是否应该对给定状态可见，例如
.controller('AppCtrl', function() {
this.isHeaderVisible = function() {
return ...// your logic here
}
});
然后使用ng-if （或根据评论的ng-show ）：
<div header ng-if="app.isHeaderVisible()"></div>
页脚也是如此。
解决方案2
1 2015-03-31 15:01:17
不要使用ng-hide或控制器。 Ui-router具有内置的功能。 根据您当前的状态，使用嵌套状态和嵌套视图显示/隐藏。 看看这些链接：
- https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
- https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views 。
设置一个plunker，我帮助你让它工作。
解决方案3
0 2015-03-31 14:27:21
如果您正在为状态使用单独的控制器，则可以在每个控制器中设置布尔范围变量，然后使用这些变量和ng-show来控制显示的内容。
解决方案4
0 2015-03-31 15:43:56
请使用角度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路由器获取状态错误
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.