指令模板值未更新

Question

我正在建立一个像这样的指令(超时功能就像一个演示):

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链接到我链接属性的部分？

Answer 1

我能用你的例子看到的唯一问题是你使用的是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);

祝你好运!