javascript - 如何知道 DOM 何时完成渲染

Question

在 AngularJS 自动生成 en 元素后(在 ng-repeat 中)，我正在尝试弄清楚如何知道 DOM 何时准备就绪。

在我的例子中，我在表中创建了一个新行(它是一个数组上的 ng-repeat)并且我希望立即以编程方式 在行内的元素上触发 click 事件。它在任何时候都不起作用，因为在触发 click 的那一刻，Angular 还没有创建 DOM 元素。

我想要的是一些东西(一个事件)可以告诉我“嘿，我已经完成了你的 DOM 元素的创建，继续和我一起做任何你想做的事情”。我搜索过类似的东西，但没有真正找到任何可以做到这一点的东西。

I created a plunkr说明问题。

Answer 1

你在 $timeout 的正确轨道上，但你不需要很长的延迟。Angular 需要一个机会来更新 DOM。通过不带第二个参数调用 $timeout，您基本上可以说“在当前工作线程完成后立即执行此操作”，因此它会在 Angular 完成修改 DOM 后立即运行。

$scope.add_row = function() {
  $scope.table_rows.push({text: 'blabla'});
  var row = '#row'+($scope.table_rows.length-1)+' input';
  $timeout(function() {
    $(row).click();
  });
}

编辑:话虽如此，这可能是指令更好的地方。操作 DOM(甚至只是触发点击事件)不是您应该在 Controller 中执行的操作。这是让您入门的另一个问题:How to register event while angularjs finish rendering UI