Angular: Ereignis-Listener erhöhen sich inkrementell zwischen Direktivenänderungen

Question

Ich habe einen Angular-Zustand, der zwischen drei Vorlagen rotieren kann, die jeweils durch eine eigene Direktive gesteuert werden. Die Direktiven haben Ereignis-Listener, aber wenn ich mich durch die Direktiven drehe, addieren sich die Ereignis-Listener um eins, und nach dem ersten Übergang zu einer anderen Direktive beginnt alles fehlerhaft zu werden. Ich habe versucht, diese Fehler zu beheben, aber ohne Erfolg. Hier ist ein Beispiel für eine der drei Richtlinien:

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

Und hier ist die Funktion allEncompassing(), welches alle drei presetStation Richtlinien. Sie alle verwenden PresetFactory und wenn ich von einer Direktive zu einer anderen ändere, erhöhen sich die Aufrufe von PresetFactory inkrementell.

Was ist der beste Weg, die Erhöhung dieser Ereignis-Listener zu minimieren und sie auf einen einzelnen Ereignis-Listener zu beschränken?

Answer 1

Hier ist die Antwort, und es ist viel einfacher als die Verwendung von Ereignis-Listenern. Ich dachte, dass ich Event-Listener brauchte, seit ich ein Mousedown-Ereignis beobachtete, um festzustellen, ob ich einen Radiosender einstellen oder zu einem Radiosender wechseln sollte. Stattdessen habe ich den $interval Service und HTML-Attribute 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' 
    }; 
});