angularjs 指令慢 dom 操作

Question

我有一个指令需要访问其中元素的宽度。我遇到的问题是宽度包含由 angular 编译的动态文本，angular 指令似乎至少需要 35 毫秒才能在 link 函数中实际编译。结果我添加了一个 setTimeout-to-zero 函数，但这感觉真的很脏。我是不是遗漏了什么或者这只是一个 angularjs 错误？这是代码。

Javascript:

angular.module('myApp', [])
    .directive('myDir', MyDirective);

function MyDirective() {
    return {
        restrict: 'E',
        scope: {
            mytext : '@'
        },
        template: '<span>{{mytext}}</span>',
        link: function(scope, elem, attr) {
            console.log(Date.now(), elem.text());
            setTimeout(function() {
                console.log(Date.now(), elem.text());
            }, 0);
        }
    }
}

HTML:

<div ng-app="myApp">
    <my-dir mytext="Hello"></my-dir>
</div>

这里是控制台结果的示例：

1438529990502 "{{mytext}}"
1438529990523 "Hello"

你可以在这里演示：https://jsfiddle.net/38m6hxk6/15/

Answer 1

你说得对，你需要超时，不过你应该使用 angulars $timeout。它将等待 angular 完成最新的摘要周期。您可以在文档中阅读它。

https://docs.angularjs.org/api/ng/service/$timeout

angularjs 指令慢 dom 操作

angularjs directive slow dom manipulation

javascript

performance

compilation

render

angularjs