Question

我有一个简单的自定义指令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

你能解释一下为什么吗？

Answer 1

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

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

在这种特殊情况下，您只需使用$timeout function将setTimeout(fn, 1000)调用替换为$timeout(fn, 1000)，您的代码将使用范围包装。$ apply（）调用（{{3} }）。

Answer 2

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

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

来自documentation：

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

自定义指令模板内的模型永远不会更新

2 个答案: