angularjs 指令慢 dom 操作答案

【问题标题】：angularjs directive slow dom manipulationangularjs 指令慢 dom 操作
【发布时间】：2015-08-02 15:53:27
【问题描述】：

我有一个指令需要访问其中元素的宽度。我遇到的问题是宽度包含由角度编译的动态文本，角度指令似乎需要至少 35 毫秒才能在链接函数中实际编译。结果，我添加了一个 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/

【问题讨论】：

角度认为 50 毫秒是即时的 - stackoverflow.com/questions/9682092/databinding-in-angularjs
使用$timeout 不设置时间，或自己使用$compile。不能指望一切都是同步的......即使重新绘制 DOm 也需要时间

标签： javascript angularjs performance compilation render

【解决方案1】：

你是对的，你需要一个超时，但你应该使用 angulars $timeout。它将等待 angular 完成最新的摘要周期。您可以在文档中了解它。

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

【讨论】：

谢谢。我猜 $timeout 感觉不如 setTimeout 脏。我没关系。