Angular：判断ng-repeat循环结束，监听DOM渲染完成

发表于 | 分类于 |

方法一：自定义指令，监听ng-repeat状态

本方法只适用于ng-repeat遍历的数据内容不变的情况
如果数据内容改变，使用此方法会出bug：假设列表A包含3项内容，列表B中包含4项内容，当数据从A列表切换到B列表时，会触发link方法，但当数据从B列表切换到A列表时，则不会触发。也就是数据列表中的项由多变少时不会触发link事件

html部分代码：

1
2
3
<ul>
    <li ng-repeat="item in data track by $index" repeat-finish></li>
</ul>

js部分代码：

1
2
3
4
5
6
7
8
9
10
angular.module("mainApp").directive('repeatFinish', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if(scope.$last === true) {
                // ng-repeat循环完成后要做的事情
            };
        },
    };
}]);

方法二：使用$timeout

本方法可以用于ng-repeat遍历的数据内容改变的情况
$timeout是angular为了能自动触发脏检测而封装的方法，是异步的
将你需要执行的方法放在$timeout中，它就会等到所有的dom渲染完成以及同步逻辑跑完后执行

html部分代码：

1
2
3
<ul>
    <li ng-repeat="item in data track by $index"></li>
</ul>

js部分代码：

1
2
3
$timeout(function () {
    // 处理dom加载完成，或者ng-repeat循环完成后要做的事情
},0);