Angular：事件监听器在指令变化之间递增地增加

Question

我有一个角度状态，它可以在三个模板之间旋转，每个模板都由它自己的指令控制。指令有事件侦听器，但是当我循环通过指令时，事件侦听器加起来一个，在第一次转换到另一个指令后，所有事情都开始出现故障。我试图修复这些错误，但无济于事。下面是三个指令的一个示例：

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' 
    }; 
});