ng-repeat中DOM的重新渲染机制

noobFly

于 2017-03-07 14:49:49 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： AngularJS 文章标签： dom angularJs watchCollection ng-repeat carousel

本文链接：https://blog.youkuaiyun.com/noobFly/article/details/60764509

引子：项目中遇到一个BUG，使用ui-bootstrap-tpls中的carousel插件设置轮播图时，改变ng-repeat中数组其中一个元素时，轮播图的顺序发生了变化。
代码如下:

<div carousel interval="app.Interval.value" no-pasue="false" no-transition="true">
    <div slide ng-repeat="Item in advertiseList">
        <div ng-style="{'background-color': Item.BgColor}">
            <div class="slide">
                <img class="aside cursor-pointer" ng-src="{
  
  {Item.ImgUrl|ImgUrl}}">
            </div>
        </div>
    </div>
</div>

function changeAd() {
        angular.forEach($scope.advertiselList, function (item, index) {

        if (item.Id == $scope.editAd.Id) {
           $scope.advertiseList[index] = $scope.editAd;
        }
    });
}

通过查看carsousel与slide组合指令的源码发现，当slide的DOM被重新渲染时，slide指令会在其销毁时先将其移除，然后渲染时push到尾部。
在不想改变指令的情况下，这