AngularJS指令在元素完全加载之前运行

Question

我有一个指令附加到<table>模板内的动态生成的元素.该指令在link函数内操作该表的DOM .问题是指令在表呈现之前运行(通过评估ng-repeat指令) - 表是空的.

题

如何在表完全呈现后确保指令运行？

<table directive-name>
    <tr ng-repeat="...">
        <td ng-repeat="..."></td>
    </tr>
</table>


module.directive("directiveName", function() {
    return {
        scope: "A",
        link: function(scope, element, attributes) {
            /* I need to be sure that the table is already fully
               rendered when this code runs */
        }
    };
});

Answer 1

一般来说,只要对<table>元素有一个指令,就不能"完全确定" .

但在某些情况下你可以肯定.在您的情况下,如果内部内容是ng-repeat-ed,那么如果ngRepeat已经准备好的项目数组,那么实际DOM元素将在摘要周期结束时准备就绪.您可以在$timeout0延迟后捕获它:

link: function(scope, element){
  $timeout(function(){
    console.log(element.find("tr").length); // will be > 0
  })
}

但是,从一般意义上讲,您无法确定捕获内容.如果ngRepeated数组还没有呢？或者如果有的话ng-include呢？

<table directive-name ng-include="'templates/tr.html'">
</table>

或者,如果有一个自定义指令的工作方式不同ngRepeat,该怎么办？

但是如果你完全控制了内容,一种可能的方法就是将一些辅助指令作为最里面/最后一个元素包含在内,并directiveName在链接时让它与父节点联系:

<table directive-name>
    <tr ng-repeat="...">
        <td ng-repeat="...">
          <directive-name-helper ng-if="$last">
        </td>
    </tr>
</table>

.directive("directiveNameHelper", function(){
  return {
    require: "?^directiveName",
    link: function(scope, element, attrs, ctrl){
      if (!ctrl) return;

      ctrl.notifyDone();
    }
  }
})

Answer 2

尝试包装$timeout链接函数中的代码，因为它将在呈现DOM之后执行。

$timeout(function () {
    //do your stuff here as the DOM has finished rendering already
});

不要忘记$timeout在指令中添加：

.directive("directiveName", function($timeout) {

有很多选择，但是我认为这是更清洁的方法，因为$ timeout在渲染引擎完成工作后执行。