倒计时指令和角度控制器之间的干扰?

时间:2015-10-05 07:57:46

标签: javascript angularjs

我的应用程序中的两个角度函数之间存在一些非常奇怪的干扰,我无法解释。问题的最终结果会导致这种情况发生:

enter image description here

我的一个页面中嵌入了一个倒计时指令,它也是一个角度控制器的域。这是倒计时指令:

(function() {
    var app = angular.module('app');

    app.directive('countdown', ['$interval', function($interval) {
        return {
            restrict: 'E',
            scope: {
                specificity: '=',
                countdownTo: '=',
                callback: '&?'
            },
            link: function($scope, elem, attrs) {

                $scope.isLaunchExact = ($scope.specificity == 6 || $scope.specificity == 7);

                $scope.$watch('specificity', function(newValue) {
                    $scope.isLaunchExact = (newValue == 6 || newValue == 7);
                });

                var countdownProcessor = function() {

                    var launchUnixSeconds = $scope.launchUnixSeconds;
                    var currentUnixSeconds = Math.floor(Date.now() / 1000);

                    if (launchUnixSeconds >= currentUnixSeconds) {
                        $scope.secondsAwayFromLaunch = launchUnixSeconds - currentUnixSeconds;

                        var secondsBetween = $scope.secondsAwayFromLaunch;
                        // Calculate the number of days, hours, minutes, seconds
                        $scope.days = Math.floor(secondsBetween / (60 * 60 * 24));
                        secondsBetween -= $scope.days * 60 * 60 * 24;

                        $scope.hours = Math.floor(secondsBetween / (60 * 60));
                        secondsBetween -= $scope.hours * 60 * 60;

                        $scope.minutes = Math.floor(secondsBetween / 60);
                        secondsBetween -= $scope.minutes * 60;

                        $scope.seconds = secondsBetween;

                        $scope.daysText = $scope.days == 1 ? 'Day' : 'Days';
                        $scope.hoursText = $scope.hours == 1 ? 'Hour' : 'Hours';
                        $scope.minutesText = $scope.minutes == 1 ? 'Minute' : 'Minutes';
                        $scope.secondsText = $scope.seconds == 1 ? 'Second' : 'Seconds';
                    } else {
                    }

                    if (attrs.callback) {
                        $scope.callback();
                    }
                };

                // Countdown here
                if ($scope.isLaunchExact) {
                    $scope.launchUnixSeconds = moment($scope.countdownTo).unix();
                    $interval(countdownProcessor, 1000);
                } else {
                    $scope.countdownText = $scope.countdownTo;
                }
            },
            templateUrl: '/js/templates/countdown.html'
        }
    }]);
})();

以下是受到干扰的Angular控制器:

(function() {
    var app = angular.module('app', []);

    //app.value('duScrollDuration', 1000);

    app.controller("homeController", ['$scope', 'Statistic', function($scope, Statistic) {
        $scope.statistics = [];
        $scope.activeStatistic = false;

        $scope.goToClickedStatistic = function(statisticType) {
            history.replaceState('', document.title, '#' + statisticType);
            $scope.activeStatistic = statisticType;
        };

        $scope.goToNeighborStatistic = function(index) {
            if (index >= 0 && index < $scope.statistics.length) {
                var stat = $scope.statistics[index];

                history.replaceState('', document.title, '#' + stat.camelCaseType); // WhyIsThisFlashing
                $scope.activeStatistic = stat.camelCaseType;

                return stat.camelCaseType;
            } else {
                $scope.goHome();
            }
        };

        $scope.goToFirstStatistic = function() {

        };

        $scope.goHome = function() {
            history.replaceState('', document.title, window.location.pathname);
            $scope.activeStatistic = false;
            return 'home';
        };

        /*$window.on('scroll',
            $.debounce(100, function() {
                $('div[data-stat]').fracs('max', 'visible', function(best) {
                    $scope.activeStatistic($(best).data('stat'));
                });
            })
        );*/

        (function() {
            laravel.statistics.forEach(function(statistic) {
                $scope.statistics.push(new Statistic(statistic));
            });

            if (window.location.hash) {
                $scope.activeStatistic = window.location.hash.substring(1);
            }
        })();
    }]);

    app.factory('Statistic', function() {
        return function(statistic) {

            var self = {};

            self.changeSubstatistic = function(newSubstatistic) {
                self.activeSubstatistic = newSubstatistic;
            };

            statistic.forEach(function(substatistic) {

                if (!self.substatistics) {

                    self.substatistics = [];
                    self.activeSubstatistic = substatistic;
                    self.type = substatistic.type;
                    self.camelCaseType = self.type.replace(" ", "");
                }

                self.substatistics.push(substatistic);
            });

            return self;
        }
    });
})();

每次运行countdownProcessor中的倒计时指令$interval函数时,我的角度控制器中的goToNeighborStatistic都会以某种方式被调用。我不知道为什么。

如果我单步执行我的倒计时指令,在单步执行countdownProcessor功能后,就会出现一个&#34;匿名脚本&#34;使用以下内容调用named SCRIPT0

"use strict";
var fn=function(s,l,a,i){var v0,v1,v2,v3=l&&('goToNeighborStatistic' in l),v4,v5,v6=l&&('\u0024index' in l);v2=v3?l:s;if(!(v3)){if(s){v1=s.goToNeighborStatistic;}}else{v1=l.goToNeighborStatistic;}if(v1!=null){ensureSafeFunction(v1,text);if(!(v6)){if(s){v5=s.$index;}}else{v5=l.$index;}v4=ifDefined(v5,0)-ifDefined(1,0);ensureSafeObject(v2,text);v0=ensureSafeObject(v2.goToNeighborStatistic(ensureSafeObject(ifDefined(v5,0)-ifDefined(1,0),text)),text);}else{v0=undefined;}return v0;};return fn;

为什么&#34; goToNeighborStatistic&#34;出现在这?为什么这个脚本会出现?从那里开始,goToNeighborStatistic()运行,此时,倒计时再次被调用,一切都重复。这里发生了什么?

编辑:

在Chrome中,单步执行会产生不同的结果。在countdownProcessor函数结束时,单步执行生成:

enter image description here

0 个答案:

没有答案