Javascript AngularJS$指令中间隔触发两次

我正在建立一个“吸引循环”指令。该指令将基本上拍摄照片，运行动画，隐藏该照片，然后显示列表中的下一张照片

循环的第一次运行效果良好。但是，当我返回页面时，控制动画的间隔将触发两次，造成严重破坏

要复制，请转到，单击页面，然后等待（1秒），它将自动返回到吸引循环页面并显示上面列出的错误。控制台日志表明$interval第二次被调用两次

.directive('attract', ['$timeout', '$state', '$rootScope', '$interval', function($timeout, $state, $rootScope, $interval){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            var slide, $attractWrap, $activeSlide, slideWidth, nextSlide, prevSlide, transition, elemShift;

            $rootScope.$on('restart-loop', function(e){
                console.log('Quipu Reset');
                if(angular.isDefined(scope.step1) || angular.isDefined(scope.step2) || angular.isDefined(scope.step3) || angular.isDefined(scope.step4) || angular.isDefined(scope.step5) || angular.isDefined(scope.step6) ){
                    scope.reset();
                }
            });

            scope.pan = function(obj, type){
                var $obj = $(obj), transition;

                switch(type){
                    case 'diagonal':
                        $obj.css({
                            '-webkit-transition': 'all 10s ease-in-out',
                            '-moz-transition': 'all 10s ease-in-out',
                            '-o-transition': 'all 10s ease-in-out',
                            'transition': 'all 10s ease-in-out',
                            'transform': 'translate(-2000px, -1000px)'
                        });
                        break;
                    case 'vertical':
                        $obj.css({
                            '-webkit-transition': 'all 10s ease-in-out',
                            '-moz-transition': 'all 10s ease-in-out',
                            '-o-transition': 'all 10s ease-in-out',
                            'transition': 'all 10s ease-in-out',
                            'transform': 'translate(0px, -1000px)'
                        });
                        break;
                    case 'diagonal-reverse':
                        $obj.css({
                            '-webkit-transition': 'all 10s ease-in-out',
                            '-moz-transition': 'all 10s ease-in-out',
                            '-o-transition': 'all 10s ease-in-out',
                            'transition': 'all 10s ease-in-out',
                            'transform': 'translate(-600px, -1500px)'
                        });
                        break;
                }

            };

            scope.resetTranslate = function(obj, resetLoc, nextImgFlag){
                var $obj = $(obj);
                switch(resetLoc){
                    case 'tl':
                        $obj.css({
                            '-webkit-transition': 'all 0s ease-in-out',
                            '-moz-transition': 'all 0s ease-in-out',
                            '-o-transition': 'all 0s ease-in-out',
                            'transition': 'all 0s ease-in-out',
                            'transform': 'translate(0px, 0px)'
                        });
                        break;
                    case 'tr':
                        $obj.css({
                            '-webkit-transition': 'all 0s ease-in-out',
                            '-moz-transition': 'all 0s ease-in-out',
                            '-o-transition': 'all 0s ease-in-out',
                            'transition': 'all 0s ease-in-out',
                            'transform': 'translate(-3300px, 0px)'
                        });
                        break;
                    case 'tc':
                        $obj.css({
                            '-webkit-transition': 'all 0s ease-in-out',
                            '-moz-transition': 'all 0s ease-in-out',
                            '-o-transition': 'all 0s ease-in-out',
                            'transition': 'all 0s ease-in-out',
                            'transform': 'translate(0px, 0px)'
                        });
                        break;
                }

                //if(nextImgFlag !== false){
                    //next image
                    scope.nextImage();
                //}


            };

            scope.nextImage = function(){
                $('#attract-loop').find('.active').removeClass('active').hide().next().addClass('active').show();
            }

            scope.stopStep = function(step){
                console.log($interval.cancel(step));
                return step = undefined;
            }

           scope.reset = function(){
                //flush promises
                scope.step1 = scope.stopStep(scope.step1);
                scope.step2 = scope.stopStep(scope.step2);
                scope.step3 = scope.stopStep(scope.step3);
                scope.step4 = scope.stopStep(scope.step4);
                scope.step5 = scope.stopStep(scope.step5);
                scope.step6 = scope.stopStep(scope.step6);
                scope.resetTranslate('#attract-loop', 'tl', false);
                $('#attract-loop').children().removeClass('active').hide().first().show().addClass('active');
                scope.attractLoopAnimation();
            }

            scope.attractLoopAnimation = function(){
                console.log('Starting Attract Loop');
                if(!angular.isDefined(scope.step1)){
                    scope.step1 = $interval(function(){
                        console.log('Firing step 1 - Initial diagonal pan');
                        scope.pan($('#attract-loop'), 'diagonal');
                    }, 1000, 1);
                }

                if(!angular.isDefined(scope.step2)){
                     scope.step2 = $interval(function(){
                        console.log('Firing step 2 - Reset to top center');    
                        scope.resetTranslate('#attract-loop', 'tc');
                    }, 11000, 1);
                }

                if(!angular.isDefined(scope.step3)){
                    scope.step3 = $interval(function(){
                        console.log('Firing step 3 - Vertical pan');
                        scope.pan($('#attract-loop'), 'vertical'); 
                    }, 13000, 1); 
                }

                if(!angular.isDefined(scope.step4)){
                    scope.step4 = $interval(function(){
                        console.log('Firing step 4 - Reset to top right');
                        scope.resetTranslate('#attract-loop', 'tr');
                    }, 23000, 1); 
                }

                if(!angular.isDefined(scope.step5)){
                    scope.step5 = $interval(function(){
                        console.log('Firing step 5 - Reverse diagonal pan');
                        scope.pan($('#attract-loop'), 'diagonal-reverse');
                    }, 25000, 1);  
                }

                if(!angular.isDefined(scope.step6)){
                    scope.step6 = $interval(function(){
                        console.log('Firing step 6 - Reset loop');
                        scope.reset();
                    }, 35000, 1);
                }

            }


            scope.attractLoopAnimation();



            //set timer to trigger slide function
            //setTimeout(function(){
            //  slide();
            //}, 3000);

            $(elem).click(function(){
                $state.go('about');
            });
        }
    };
}])

---

有人要吗？可能真的需要帮助这里有很多代码，很难真正了解问题所在。一旦常见的问题是在卸载指令时不取消所有的

$interval

，那么当您访问另一条路线时，仍然会触发事件，并且返回时会重复这些事件。尝试在link函数中添加一个处理程序——类似于

elem.on（'$destroy'，cleanupInterval）

。另请参见本页：将

$interval

的使用一起删除可能会更容易，因为

reset

会全部取消它们，然后重新创建它们，这似乎没有什么意义。也许

$timeout

或者在最后一次完成时简单地调用每个步骤会更容易解释。尝试使用$timeout时，无效。我怎样才能把每一个都勾起来？每个函数调用中都有动画，除了计算时间外，我如何知道动画何时完成@布兰登提利