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 元素将在摘要周期结束时准备好。您可以在 $timeout 之后捕获它0 延迟:

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

但是，在一般意义上，您不能确定捕获内容。如果 ngRepeat怎么办ed 数组还没有出现吗？或者如果有 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();
    }
  }
})