AngularJS - 知道数据何时绑定到DOM

Question

我想确定长度文本是否超过其容器的宽度，但为了做到这一点，我需要知道数据何时绑定到DOM。

AngularJS中是否有一个事件告诉我页面已被绑定，或者是使用setTimeout唯一的方法来回避它？

Answer 1

嗯，这取决于;

一次性评估

如果数据在链接后没有更改，则只需在指令中使用postLink()函数即可。默认情况下，此函数与指令的link属性绑定，因此您可以在现场简单地评估数据：

link: function(scope, element, attrs) {
    // element and data are linked, let's mess around with the DOM!
}

动态数据

如果数据在链接阶段之后发生变化（在编译DOM并且范围绑定到它之后），它会更复杂。

无法知道摘要周期何时结束（或数据更新完成时），因为每次评估都可能会更改正在评估的数据并触发另一个周期。

在这种情况下，您可以做的最好的事情就是随意决定数据何时完成更改 - 您可以$watch更改有界数据，并决定例如如果文本不等于前一个文本值，则在DOM中执行操作。

link: function(scope, element, attrs) {
    scope.$watch('counter', function(newVal, oldVal, curScope) {
        if (newVal != oldVal) {
            // data is re-evaluated, let's mess around with the DOM!
        }
    });
}

请参阅Demo进行动态数据评估。

Post Scriptum

请注意，我们讨论的是检测数据何时绑定到DOM ，而不是元素是否附加到DOM 。在大多数情况下这应该没关系，但值得注意。