angularjs当使用子控制器时,ng-if和ng-show使用有区别

背景:

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

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.

推荐阅读更多精彩内容