0

我有一个myElement带有 templateUrl 的简单自定义指令，它打印一条简单的消息：

<p>Message: {{message}}</p>

这是我的指令的定义：

testapp.directive('myElement', function() {
    return {
        restrict: 'E',
        template: '<p>Message: {{message}}</p>',
        link: function(scope, elem, attrs) {
            scope.message = 'This message is never updated... :(';
            setTimeout(function() {
                scope.message = "Why this message is never shown?";
            }, 1000);
        }
    };
});

1 秒后，我希望将消息更新为“为什么从未显示此消息？”。不幸的是，该消息永远不会更新。

这是 jsFiddle：http: //jsfiddle.net/seyz/SNMfc

你能解释一下为什么吗？

4

2 回答 2

4

由于 Angular 脏检查的工作原理，当您在 Angular 范围之外执行代码时（例如，使用 setTimeout、setInterval 或从某些第三方插件回调中），该代码调用产生的更改不会被 Angular 立即“识别”范围。

对于这种情况，您需要将代码包装在scope.$apply()方法中。

在这种特殊情况下，您可以简单地使用$timeout 函数来替换您的setTimeout(fn, 1000)调用，$timeout(fn, 1000)并且您的代码将使用 scope.$apply() 调用（Plunker）包装。

于 2013-03-03T16:18:51.293 回答
2

您将需要使用scope.$apply();

setTimeout(function() {
    scope.message = "Why this message is never shown?";
    scope.$apply();
}, 1000);

从文档中：

$apply() 用于从 Angular 框架外部执行 Angular 表达式。（例如来自浏览器 DOM 事件、setTimeout、XHR 或第三方库）。

于 2013-03-03T16:06:21.133 回答