角度：ディレクティブの変更の間にイベントリスナーが徐々に増加する

Question

角度の状態は、それぞれ独自の指示で制御される3つのテンプレートの間で回転できます。ディレクティブにはイベントリスナーがありますが、ディレクティブを回転させると、イベントリスナーが1つずつ追加され、最初の別のディレクティブへの移行後にすべてがバグを起こし始めます。私はこれらのバグを修正しようとしましたが、無駄です。ここでは3つのディレクティブのいずれかの例です：

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

そしてここでは、3つのすべてのpresetStationディレクティブで機能allEncompassing()は、あります。彼らはすべて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

これは答えです。イベントリスナーを使用するよりも簡単です。私は、ラジオ局を設定するか、ラジオ局に切り替えるべきかを判断するためにマウスイベントを見ていたので、イベントリスナーが必要だと思った。代わりに、私は$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' 
    }; 
});