范围。$ watch with $ timeout

时间:2016-03-25 12:12:07

标签: angularjs

嘿我在Angular中构建功能但我遇到了一些问题。 我有这样的ng-model和example-directive。

<input ng-model="model" type="text" class="form-control">
<div example-dir test="model"></div>

我想将模型从输入传递给指令,并且此模型中的每个新val都会启动$ timeout,但是第一个新的val应该启动$ timeout,但是每个下一个新的val必须重新启动$ timeout。

例如。当我们传递数据输入$ timeout开始启动(eaxmple为1000毫秒)但是每个下一个数据必须重新启动$ timeout到0并重新开始。

有我的指令代码:

    function link(scope, element, attr) {
      
        scope.$watch('test',function(nval){
        var timeout;
        function incrementTimer(){
           //some stuff
        }
            if(nval){


                timeout = $timeout(incrementTimer, 1000);
                $timeout.cancel(timeout);

            }
        });
                    
            
    }

我不知道何时何地通过$ timeout并取消工作corectly。 谢谢你的帮助。

1 个答案:

答案 0 :(得分:2)

您正在做的是每次迭代重新声明timeout变量。在链接函数中声明超时,然后重置它:

link: function (scope) {
    function myFunc () { console.log('tick'); }      
    var timeout;

    scope.$watch(function () {
        return scope.test;
    }, function (newVal, oldVal) {
        if (timeout) {
            $timeout.cancel(timeout);
        }
        timeout = $timeout(myFunc, 1000);
    });
}

Fiddle