AngularJs - 在指令中动态设置 $timeout 延迟答案

【问题标题】：AngularJs - set $timeout delay dynamically in a directiveAngularJs - 在指令中动态设置 $timeout 延迟
【发布时间】：2015-01-31 20:33:04
【问题描述】：

我在指令中声明了下一个方法来延迟显示幻灯片：

            var timer;

            var sliderFunc = function(){
                timer = $timeout(function(){
                    scope.next();
                    timer = $timeout(sliderFunc, 5000);
                }, 5000);
            };

            sliderFunc();

有了这个例子，一切都很好。

但我想在第一张幻灯片 (1000) 和其他幻灯片 (5000) 之间设置不同的延迟。所以我尝试像这个例子一样动态设置“延迟”参数：

            var timer;
            scope.timeout = 5000;

            var sliderFunc = function(){
                timer = $timeout(function(){
                    scope.next();
                    timer = $timeout(sliderFunc, scope.timeout);
                }, scope.timeout);
            };

            sliderFunc();

在第一次出现时，延迟很好，但在接下来的步骤中，'scope.timeout' 未定义。

有人知道如何解决吗？

更新 1：

如果我在第一次出现时检查我的代码，当我输入“slideFunc”时，“延迟”（等于上一个示例中的 scope.timeout）等于“5000”，但在第二个函数和下一步：

更新 2：

这是我的全部指令：

'delay' 应该在我的指令声明中设置。

angular.module('myApp.central.directives', []).
directive('slider', function($timeout) {
    return {
        restrict: 'AE',
        replace: true,
        scope: {
          list: '=',
          delay: '='
        },
        link: function (scope, elem, attrs) {

            scope.currentIndex = 0;

            scope.next = function(){
                if (scope.currentIndex < scope.list.length -1) {
                    scope.currentIndex++;
                } else {
                    scope.currentIndex = 0;
                }
            };

            scope.$watch('currentIndex',function(){
                // some code useless for this problem
            });

            /* Start: For Automatic slideshow*/

            var timer;
            scope.delay = 5000;

            var sliderFunc = function(){
                timer = $timeout(function(){
                    scope.next();
                    timer = $timeout(sliderFunc, scope.delay);
                }, scope.delay);
            };

            sliderFunc();

            scope.$on('$destroy',function(){
                $timeout.cancel(timer);
            });

            /* End : For Automatic slideshow*/

        },
        templateUrl: 'partials/widgets/slider-template.html'
    };
});

【问题讨论】：

我删除了我的答案，因为我注意到第一段代码实际上正在运行：jsfiddle.net/k6f05wn8/1。什么是 next() 函数？
我不认为 'next()' 函数对这个问题有什么重要的作用。我用我的整个指令更新了主题
我试图用 'var delay = 5000' 替换 'scope.delay = 5000' 并且它有效。问题似乎来自范围。而且我需要使用作用域中的“延迟”，因为它应该是一个指令参数。
抱歉，它仍然有效：jsfiddle.net/mk3yywz5
我重现了我的问题：jsfiddle.net/2hoLadsL/2 'delay' 参数需要在 html 中定义。我以为我可以通过设置'scope.delay = 5000;'来定义默认值在指令代码中，但我不能。谢谢@MichaelZucchetta ;)

标签： javascript angularjs timeout

【解决方案1】：

当使用双向绑定时，您不能只绑定一个标量值，例如整数。您必须绑定到对象的属性。这是因为它存储对对象的引用的方式。基本上任何使用绑定的地方都要确保有一个点。

例如

$scope.test = {
 v: [],
 z: 1000
}

<div ng-app="myApp.central.directives" ng-controller="ctrl">
    <slider list="test.v" delay="test.z"></slider>
</div>

【讨论】：