AngularJS $ interval在指令中触发两次

Question

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

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

要重现，请转到Reproduction Link，单击页面然后等待（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');
            });
        }
    };
}])