背景：
运营系统很多日报月报，很多列表，列表有分页，项目对请求列表和分页做了封装。
有一个具体的需求是，一个列表，打开其中一项，显示一个与该项相关的新的列表，为了返回后不重置列表的搜索条件和保留当前页数，不打算用打开新的页面去做新的列表（在新页面返回后，页面数据都没了，也懒得用缓存），而是用子控制器的方式，如下图：
111111111111111111.png
视图文件代码如下（样式省略）：
<div ng-include="'page-header.html'"></div><div ng-if="mainList"> ............ <div ng-include="'list_temp.html'"></div></div><!--详情列表（打开的新列表）--><div ng-if="!mainList"> ........................ <div ng-controller="subCtrl"> <div ng-include="'list_temp.html'"></div> </div> <button ng-click="closePopup()">退出</button> </div></div>
ng-include中的list_temp.html的代码（样式省略）如下：
<div class="table-wrap">
<table>
<thead>
.................. </thead>
<tbody>
<tr ng-repeat="item in tableBodyList">
<td ng-repeat="(props, value) in item">{{value}}</td>
................. </tr>
</tbody>
<tbody ng-if="tableBodyList.length == 0">
<td style="text-align: center">暂无数据</td>
</tbody>
</table>
<!--自定义分页组件，代码略-->
<pagination conf="paginationConf"></pagination></div>javascript代码：
app.controller('parentCtrl', function($scope...){
................ //ng-if的条件值
$scope.mainList = true; //显示详情列表
$scope.showDetailList = function(){
$scope.mainList = false;
}
});
app.controller('subCtrl', function($scope...){
............
});上述代码是正确的实现方式，下面说一下我走过的坑：
刚开始在视图中用ng-show，而不是ng-if。 用ng-show在页面加载时，父，子控制同时初始化，同时执行了，在打开详情列表时，我用$scope.$broadcast的方式控制子控制在点击的时候执行，
javascript代码：
app.controller('parentCtrl', function($scope...){
................. //ng-show的条件值
$scope.mainList = true; //显示详情列表
$scope.showDetailList = function(item){
$scope.mainList = false;
$scope.$broadcast("parentChange", item.id);
}
});
app.controller('subCtrl', function($scope...){
$scope.$on("parentChange", function(e, m) {
$scope.detailId = m;
...............................
});
});这时父控制器的值会影响子控制器中的值，子控制器界面上操作事件，也会调用父控制器中的事件方法，导致混乱，
如果用ng-if，当true时，ng-controller子控制器才会初始化，为false时，在页面加载的时候不会初始化，当父控制中的方法把ng-if条件值改为true时，子控制器执行了，这个时候也不需要$scope.$broadcast广播的方式了，父控制器的值也不会影响子控制器中的值和方法了。
下面是ng-if、ng-show、ng-hide的区别：
当一个元素被ng-if从DOM中移除(ng-if=false)，同它关联的作用域也会被销毁。而且当它重新加入DOM中时(ng-if=true)，会通过原型继承从它的父作用域生成一个新的作用域。也就是说ng-if会新建作用域，而ng-show和ng-hide则不会。
ng-show和ng-hide根据所给表达式的值来显示或隐藏HTML元素，ng-hide功能类似，但作用相反。元素的显示或隐藏是通过改变CSS的display属性值来实现的。
StackOverflow文章，也有人提问ng-if和ng-show的差别。这里直接附上:
ng-if
will remove elements from DOM. This means that all your handlers or anything else attached to those elements will be lost. For example, if you bound a click handler to one of child elements, when ng-if
evaluates to false, that element will be removed from DOM and your click handler will not work any more, even after ng-if
later evaluates to true and displays the element. You will need to reattach the handler.
ng-show/ng-hide
does not remove the elements from DOM. It uses CSS styles to hide/show elements (note: you might need to add your own classes). This way your handlers that were attached to children will not be lost.
ng-if
creates a child scope while ng-show/ng-hide
does not
Elements that are not in the DOM have less performance impact and your web app might appear to be faster when using ng-if
compared to ng-show/ng-hide
. In my experience, the difference is negligible. Animations are possible when using both ng-show/ng-hide and ng-if, with examples for both in the Angular documentation.
作者：竿牍
链接：https://www.jianshu.com/p/03a85e3c52d4
随时随地看视频
