angularjs – ng-repeat渲染顺序由ng-if反转

栏目: JavaScript · 发布时间: 6年前

内容简介：翻译自：https://stackoverflow.com/questions/28648762/ng-repeat-render-order-reversed-by-ng-if

我刚刚遇到这个,我想知道这是一个错误还是预期的行为？这只是一个显示问题的小例子.以下代码用于两个示例：

<body ng-app="app" ng-controller="AppCtrl">
    <item-directive ng-repeat="item in ::items" item="item"></item-directive>
</body>

angular
    .module('app', [])
    .controller('AppCtrl', AppCtrl)
    .directive('itemDirective', itemDirective)
    .factory('model', model);


function AppCtrl($scope, model) {

    $scope.items = model.getItems();
} 

function itemDirective() {

    return {
        restrict: 'E',
        replace: true,
        scope: {
            item: '='
        },
        templateUrl: 'item-directive.html'
    };
}

function model() {

    return {
        getItems: getItems
    }

    function getItems() {

        return [
            {
                type: 'test',
                title: 'test 1'
            },
            {
                type: 'test',
                title: 'test 2'
            },
            {
                type: 'test',
                title: 'test 3'
            }
        ];
    }
}

第一个示例有这个item-directive.html,它按预期以正确的顺序呈现

<div>

    <span>{{::item.title}}</span>

</div>

Plunkr without ng-if

但是第二个例子 – 它有以下item-directive.html – 包含一个ng-if,它导致列表以相反的顺序呈现？

<div ng-if="item.type == 'test'">

    <span>{{::item.title}}</span>

</div>

Plunkr with ng-if

——–更新———-

我刚刚注意到(这与@ squiroid的回答中提到的问题有关)隔离范围在这个例子中实际上并不起作用.它似乎是,但是项目指令范围(或者更确切地说它最终的范围)可以通过ng-repeat,而不是隔离范围.如果您尝试在隔离范围上设置任何其他值,即使它们显示在传递给指令的链接和控制器函数的范围上(如plnkr的控制台输出中所示),它们也不可用于模板.除非你删除替换.

Plunkr showing broken isolate scope

Plunkr showing fixed isolate scope when replace:false

—更新2 —

我已经更新了两个示例,以显示一旦删除隔离范围后问题仍然存在

Plunkr without ng-if and no isolate scope

Plunkr with ng-if and no isolate scope

还有一个新版本显示了从templateUrl到模板的更改 – 正如@Manube所建议的那样 – 显示了按预期工作的行为

Plunkr with ng-if and no isolate scope using template instead of templateUrl

在带有replace：true的指令的根元素上使用ng-if会创建一个损坏的范围

ISSUE

这种情况发生在替换：’true’和ng-if在根元素上的组合.

确保templateUrl中html的内容只有一个根元素.

如果你把ng-if放在span上

<div >

    <span ng-if="item.type == 'test'">{{::item.title}}</span>

</div>

现在为什么会发生这种情况,因为ngIf指令基于{expression}删除或重新创建DOM树的一部分.如果分配给ngIf的表达式求值为false值,则从DOM中删除该元素,否则将元素的克隆重新插入DOM.

这可能导致在渲染时templateUrl上没有根元素,从而导致不必要的行为.

翻译自：https://stackoverflow.com/questions/28648762/ng-repeat-render-order-reversed-by-ng-if

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

敏捷估计与规划

[美] Mike Cohn / 宋锐 / 清华大学出版社 / 2007-7 / 39.90元

《敏捷估计与规划》一书为对敏捷项目进行估计与规划提供了权威实际的指导方针。在本书中，敏捷联盟的共同创始人Mike Cohn讨论了敏捷估计与规划的思想，并使用现实的例子与案例分析向您详细地展示了如何完成工作。本书清晰地阐述了有关的概念，并引导读者逐步认识到下列一些问题的答案：我们要构建什么？它的规模有多大？需要在什么时候完成？到那个时候我们到底能完成多少？您首先会认识到优秀的计划由哪些东西组成，接着......一起来看看《敏捷估计与规划》这本书的介绍吧!

码农工具

angularjs – ng-repeat渲染顺序由ng-if反转

敏捷估计与规划

JS 压缩/解压工具

CSS 压缩/解压工具

SHA 加密