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

Angular: event listeners increase incrementally between directive changes

本文关键字:之间 增加 指令 事件 侦听器 Angular      更新时间:2023-09-26

我有一个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();
    }
}

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

以下是答案,它比使用事件侦听器容易得多。我想我需要事件监听器,因为我正在观看鼠标按下事件,以确定我应该设置一个广播电台还是更改为一个广播台。相反,我使用了$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'
    };  
});