背景：

运营系统很多日报月报，很多列表，列表有分页，项目对请求列表和分页做了封装。
有一个具体的需求是，一个列表，打开其中一项，显示一个与该项相关的新的列表，为了返回后不重置列表的搜索条件和保留当前页数，不打算用打开新的页面去做新的列表（在新页面返回后，页面数据都没了，也懒得用缓存），而是用子控制器的方式，如下图：

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