背景：

運營系統(tǒng)很多日報月報，很多列表，列表有分頁，項目對請求列表和分頁做了封裝。
有一個具體的需求是，一個列表，打開其中一項，顯示一個與該項相關的新的列表，為了返回后不重置列表的搜索條件和保留當前頁數(shù)，不打算用打開新的頁面去做新的列表（在新頁面返回后，頁面數(shù)據(jù)都沒了，也懶得用緩存），而是用子控制器的方式，如下圖：

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">暫無數(shù)據(jù)</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...){
    ............
});

上述代碼是正確的實現(xiàn)方式，下面說一下我走過的坑：

剛開始在視圖中用ng-show，而不是ng-if。 用ng-show在頁面加載時，父，子控制同時初始化，同時執(zhí)行了，在打開詳情列表時，我用$scope.$broadcast的方式控制子控制在點擊的時候執(zhí)行，
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時，子控制器執(zhí)行了，這個時候也不需要$scope.$broadcast廣播的方式了，父控制器的值也不會影響子控制器中的值和方法了。

下面是ng-if、ng-show、ng-hide的區(qū)別：

當一個元素被ng-if從DOM中移除(ng-if=false)，同它關聯(lián)的作用域也會被銷毀。而且當它重新加入DOM中時(ng-if=true)，會通過原型繼承從它的父作用域生成一個新的作用域。也就是說ng-if會新建作用域，而ng-show和ng-hide則不會。

ng-show和ng-hide根據(jù)所給表達式的值來顯示或隱藏HTML元素，ng-hide功能類似，但作用相反。元素的顯示或隱藏是通過改變CSS的display屬性值來實現(xiàn)的。

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.