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 に答える