1

私はそのようにディレクティブを設定しています（デモとしてのタイムアウト機能）：

app.directive('timeRange', function () {
    return {
        restrict: 'A',
        scope: {
            sliderId: "@sliderId",
        },
        template:   '<div id="{{sliderId}}"></div>'+
                    '<p>From: <span>{{fromVal}}</span>'+
                        '<span style="float:right;">{{toVal}}</span><span style="float:right;">To: </span>'+
                    '</p>',
        link: function (scope, elem, attrs) {

            scope.sliderId = 'NewId';
            scope.fromVal = '06:00';
            scope.toVal = '17:00';

            setTimeout(function(){
                scope.fromVal = 'Hello';
                log("Changed");
            }, 2000);
        },
    };
});

タイムアウト関数が実行されると、HTML は更新されず、値は のまま06:00です。変数が更新されたときにテンプレートを更新するにはどうすればよいですか? scope属性をリンクするセクションで何らかの方法でリンクする必要がありますか?

4

1 に答える 1

5

あなたの例で私が見ることができる唯一の問題は、サービスsetTimeoutの代わりに使用していることです。$timeoutこの方法で角度変数またはスコープ変数を変更するときはいつでも$scope.$apply()、$timeoutサービスが行うことを手動で呼び出す必要があります。次のコードは、より適切に機能します。

app.directive('timeRange', function ($timeout) {
    return {
        restrict: 'A',
        scope: {
            sliderId: "@sliderId",
        },
        template:   '<div id="{{sliderId}}"></div>'+
                    '<p>From: <span>{{fromVal}}</span>'+
                        '<span style="float:right;">{{toVal}}</span><span style="float:right;">To: </span>'+
                    '</p>',
        link: function (scope, elem, attrs) {

            scope.sliderId = 'NewId';
            scope.fromVal = '08:00';
            scope.toVal = '17:00';

            $timeout(function(){
                scope.fromVal = 'Hello';
                console.log("Changed");
            }, 2000);
        },
    };
});

の注入$timeoutと使用方法に注意してください。

Plunker でこれを参照してください: http://plnkr.co/edit/KlRAeg6cVhehw2EhWzCK?p=preview

オリジナルを修正中...

修正された元のコードは次のようになります (単なるスニペット):

setTimeout(function(){
    scope.fromVal = 'Hello';
    scope.$apply();
    console.log("Changed");
}, 2000);

頑張ってください！

于 2014-05-14T14:02:08.277 に答える