分析嵌入的内容答案

【问题标题】：Analyze transcluded content分析嵌入的内容
【发布时间】：2015-02-23 15:33:59
【问题描述】：

我有一个指令，它包含一个任意内容，它应该包含一些可以使用 ngRepeat 创建的子项。在 link 或 transcludeFn 中，我可以访问子模板，而不是完成的 DOM。鉴于此，我该如何计算，例如每个孩子的 .width() 总和？

见http://embed.plnkr.co/o492ObrHC65zbCMxIhxu/

【问题讨论】：

标签： angularjs directive angularjs-ng-transclude

【解决方案1】：

这是 ng-repeat 和 ng-if 工作的人的产物 - 他们创建评论，然后 $watch 获取值以在 DOM 中插入或删除元素。

因此，您获得了转入元素的实际 DOM，但它仍处于由 ng-if/ng-repeat 生成的过程中，它们已安排在摘要周期结束时生成。

快速修复似乎是在 0 秒内使用 $timeout。这并不像看起来那样骇人听闻 - 没有竞争条件的机会。它所做的只是安排函数在摘要周期结束时运行，确保它会看到ng-repeat 和ng-if 所做的更改。

link: function(scope, iElement){

   scope.$watchCollection('items', function () {
      // will not yet have the repeated elements
      console.log("before timeout", iElement.html());
      $timeout(function () {
        // will have all the repeated elements
        console.log("after timeout", iElement.html());
      });
    });
}

plunker

然而，这说明，您永远不知道嵌入指令正在或可能正在做什么 - 有些可能会在以后更改 DOM。更好的方法可能是监听 DOM 变化并做出反应。

【讨论】：