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