Wie zu stoppen Richtungscode ausgeführt werden, wenn Sie in Angular ändern

Question

Ich habe eine harte Zeit zu verstehen, warum der Code in meiner Direktive nicht aufhören wird zu laufen, auch nachdem ich Staaten und das Dom-Element habe ich die Richtlinie zu beschränken ist nicht mehr in einer verfügbaren Ansicht. Wenn ich im folgenden Codebeispiel auf der Homepage starte, wird die document.addEventListener-Funktion nicht mit der Maus ausgeführt, was ich erwarten würde. Wenn ich dann den Zustand our_purpose erhalte, in dem sich das div mit einer Klasse von "test" befindet, wird das Ereignis beim Klicken wie erwartet ausgelöst. Wenn ich jedoch zum Heimatstatus zurück navigiere, bleibt der Ereignis-Listener bestehen.

Wie mache ich es so all der Code, der innerhalb meiner Testrichtlinie lebt kann entfernt werden und nicht mehr funktionieren ... Gibt es eine Möglichkeit, alles von der Direktive neu zu starten, so dass es nicht mehr existiert, bis Sie darin sind Aussicht?

Dies ist eine vereinfachte Version meines Arbeitscodes, aber es gibt viele Funktionen in der echten Direktive, die Probleme verursachen, wenn Sie sich in dem anderen Zustand befinden.

var app = angular.module('app', ['ui.router']); 

app.directive("test", function() { 
    return { 
     scope: true, 
     transclude: false, 
     controller: 'OurPurposeCtrl', 
     restrict:"C", 
     link:function(scope, elem, attr) { 
      function testThis() { 
       console.log("still running the directive"); 
      } 
      function init() { 
       document.addEventListener('mousedown', testThis, false    ); 
      } 
      init(); 

     } 
    } 
}); 

app.config(['$stateProvider','$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider) { 
     $stateProvider 
      .state('home', { 
       url: '/', 
       controller: 'landing', 
       templateUrl: 'views/landing.html' 
      }) 

      .state('our_purpose', { 
       controller: 'OurPurposeCtrl', 
       url: '/our-purpose', 
       templateUrl: 'views/our-purpose.html' 

      }) 
    } 
]); 

Answer 1

Du Anbringen Zuhörer zu dokumentieren und es wird nie so Zuhörer zerstört hat entweder nicht

Entfernen Ereignis-Listener im Falle vom Umfang zerstören mit scope.$on('$destroy', function)

app.directive("test", function($document) { 
    return { 
     scope: true, 
     transclude: false, 
     controller: 'OurPurposeCtrl', 
     restrict:"C", 
     link:function(scope, elem, attr) { 
      function testThis() { 
       console.log("still running the directive"); 
      } 
      function init() { 
       $document.bind('mousedown', testThis); 
      } 
      init(); 

      scope.$on('$destroy', function(){ 
       $document.unbind('mousedown', testThis); 
       console.log('Mousedown listener should be gone'); 
      }); 

     } 
    } 
});