angularjs - 分析嵌入的内容

Question

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

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

Answer 1

这是谁ng-repeat和谁ng-if工作的产物——他们创建一个注释，然后$watch为一个值插入或从 DOM 中删除一个元素。

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

快速修复似乎是使用$timeout0 秒。这并不像看起来那么糟糕 - 没有竞争条件的机会。它所做的只是安排函数在摘要周期结束时运行，确保它会看到 和 所做的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());
      });
    });
}

笨蛋

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