Question

我有一个Angular状态，可以在三个模板之间旋转，每个模板由自己的指令控制。这些指令有事件监听器，但是当我在指令中循环时，事件监听器加一个，在第一次转换到另一个指令之后，一切都开始出错了。我试图修复这些错误但无济于事。以下是三个指令之一的示例：

angular.module('app').directive('presetStationOne', function($interval, $parse, $compile, PresetFactory){

    var linker = function(scope, element, attrs){

        PresetFactory.assign(1,6,scope);

        scope.$watch('page1', function(newVal, oldVal){
            if(newVal === true) {
                allEncompassing(document, PresetFactory, scope, "start");
            }
        });
        scope.$on('$destroy', function(){
            allEncompassing(document, PresetFactory, scope, "finish");
        });

    };

    return {
        restrict: 'EA',
        scope: false,
        link: linker,
        templateUrl: 'public/templates/freeplay/presetspage1.html'
    };  
});

这是函数allEncompassing()，这是所有三个presetStation指令。它们都使用PresetFactory，当我从一个指令更改为另一个指令时，对PresetFactory的调用会逐渐增加。

function allEncompassing(document, PresetFactory, scope, msg){

    if (msg === "finish"){
        removeMyListeners();
    }   

    function clickListen(e){
        var f;
        if (!e.target.attributes.stationnumber){
            if (undefined){
                return;
            } else if(!e.target.parentNode || !e.target.parentNode.parentNode || !e.target){
                return;
            } else if (!e.target.parentNode.parentNode.attributes.hasOwnProperty('stationnumber')){
                return;
            } else {
                return f = e.target.parentNode.parentNode.attributes;
            }
        } else {
            return f = e.target.attributes;
        }
    }

    function resetMouseup(PresetFactory){
        restartMyListeners();
        PresetFactory.mouseUp();            
    }
    function execMouseup(e){
        resetMouseup(PresetFactory);
    }
    function execClickListen(e){
        var f = clickListen(e);
        if (f !== undefined){
            PresetFactory.mouseDown(f, scope);
            scope.$digest();
            restartMyListeners();
        } else {
            return;         
        }
    }

    function restartMyListeners(){
        restartMousedown();
        document.removeEventListener('mouseup', execMouseup);
        document.addEventListener('mouseup', execMouseup);
    }
    function restartMousedown(){
        document.removeEventListener('mousedown', execClickListen);         
        document.addEventListener('mousedown', execClickListen);
    }
    function removeMyListeners(){
        document.removeEventListener('mousedown', execClickListen);         
        document.removeEventListener('mouseup', execMouseup);
    }
    if (msg === "start"){
        restartMyListeners();
    }
}

缓解增加这些事件侦听器并将其保留为单个事件侦听器的最佳方法是什么？

Answer 1

这是答案，它比使用事件监听器容易得多。我以为我需要事件听众，因为我正在观看一个mousedown事件，以确定我是应该设置一个广播电台还是改为广播电台。相反，我使用了$interval服务和HTML属性data-ng-mousedown="radioStn(1)" data-ng-mouseup="checkResult()"：

var dial = null;
var promise = null;
var time = 0;  
var check = false;

function defaultVal(){
    dial = null;
    promise = null;
    time = 0;
}    

function checkTime(dial, scope, $interval, $rootScope, PresetFactory){
    $interval.cancel(promise);
    if (check === true){
        console.log(dial + ' check is true');
        PresetFactory.setPreset(dial, scope);
    } else {
        console.log(dial + ' check is false');
        PresetFactory.changeStn(dial);
    }
    defaultVal();
}


angular.module('app').directive('presetStationOne', function($rootScope, $interval, $parse, $compile, PresetFactory){

    var linker = function(scope, element, attrs){

        PresetFactory.assign(1,6,scope);

        scope.radioStn = function(x){
            dial = x;
            promise = $interval(function(){
                time += 100;
                console.log(time);
                if (time >= 1000){
                    check = true;
                    checkTime(dial, scope, $interval, $rootScope, PresetFactory);
                    return;
                }
            }, 100);
        };

        scope.checkResult = function(){
            if (check === true){
                check = false;
                return;
            } else {
                checkTime(dial, scope, $interval, $rootScope, PresetFactory);
            }
        };

        scope.$on('$destroy', function(){
            defaultVal();
            check = false;
        });

    };

    return {
        restrict: 'EA',
        scope: false,
        link: linker,
        templateUrl: 'public/templates/freeplay/presetspage1.html'
    };  
});

Angular：事件侦听器在指令更改之间递增

1 个答案: