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);
        },
    };
});

当 timeout 函数运行时，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 回答