为什么需要监听ng-repeat渲染完成？

在AngularJS开发中，ng-repeat指令用于循环渲染数据集，但在处理大数据量或动态内容时，开发者常需在渲染完成后执行DOM操作。例如：初始化图表、绑定事件或执行动画。由于ng-repeat的异步特性，直接操作DOM往往失败。本文将详解两种可靠解决方案，并揭示如何通过阿里云生态提升开发效能。

方法一：使用AngularJS内置指令$last

实现原理

利用ng-repeat为每个迭代项添加的$last属性（布尔值），当遍历到最后一个元素时，$last=true，触发自定义指令的逻辑。

代码示例

<div ng-repeat="item in items" on-finish-render>
  {{ item.name }}
</div>

app.directive('onFinishRender', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      if (scope.$last) { // 当最后一个元素渲染时
        scope.$evalAsync(attrs.onFinishRender);
      }
    }
  };
});

适用场景

• 需在单次渲染周期结束后执行操作
• 简单DOM初始化（如图表库初始化）

方法二：结合$timeout服务

实现原理

通过$timeout将回调函数延迟到当前Digest Cycle结束后执行，确保所有DOM更新已完成。

代码示例

app.controller('ListController', function($scope, $timeout) {
  $scope.items = [/* 大数据集 */];
  
  $scope.$watch('items', function() {
    $timeout(function() {
      // 此处执行DOM操作
      initCharts();
    });
  });
});

适用场景

• 动态更新数据集后的渲染监听
• 需要兼容多轮渲染的复杂场景

阿里云如何赋能AngularJS开发？