AngularJS - Notwendigkeit, Javascript-Objekt auf Controller-Änderung zu löschen

Question

Ich bin neu in AngularJs. Zur Zeit habe ich eine Direktive, die ein JavaScript-Objekt namens keyListeners auffüllt. Jetzt wird dieses Objekt gefüllt und erfüllt seinen Zweck, wenn ich das erste Mal auf die Seite komme, auf der es verwendet wird. Leider, wenn ich navigieren weg von der Seite und kommen dann zurück, um es ich sehe Fehler in meiner Konsole wie

„angular.min.js: 116 Mehr als ein amtAltKey für Schlüssel‚A‘gefunden“

Dann beginnt die Funktionalität der Seite zu brechen.

Ich weiß, ich könnte theoretisch für die Existenz des Elements in keyListeners überprüfen, bevor Sie es zum Objekt hinzufügen. Anstatt dies zu tun, möchte ich jedoch einige Logik ausführen, um keyListeners über Steueränderungen zu löschen. Meine Direktive, die keyListeners tatsächlich füllt, ist unten. Wie kann ich dies bei jedem Wechsel des Controllers/der Seite löschen?

app.directive("amtAltKey", function() { 
    return { 
     link: function (scope, elem, attrs) { 
      var altKey = attrs.amtAltKey.toUpperCase(); 
      if(keyListeners[altKey] !== undefined) { throw 'More than one amtAltKey found for key \''+ altKey + '\''; } 
      if (altKey === '') { throw "Alt Key value key must be given"; } 
      var el = elem[0]; 
      if (!el.hasChildNodes()) { throw 'amtAltKey element must have child text'; } 
      if(el.firstChild.nodeName !== '#text') { throw 'amtAltKey element\'s child must be text'; } 
      var text = el.innerText; 
      var textUpper = text.toUpperCase(); 
      var indexOfKey = textUpper.indexOf(altKey); 
      if (indexOfKey === -1) { throw 'amtAltKey for \'' + altKey + '\' was not found in element\s text; ' + text; } 
      var newText = text.replace(new RegExp(attrs.amtAltKey), '<u>' + attrs.amtAltKey + '</u>'); 
      el.innerHTML = newText; 
      keyListeners[altKey] = el; 
     } 
    }; 
}); 

Answer 1

Ist keyListeners derzeit global? Wenn ja, ist das das Problem. Es wird nicht Müll gesammelt, wenn die Direktive gesprengt wird, wenn Bildschirme umgeschaltet werden. Fügen Sie einfach etwas wie ...

var keyListenteners = {}; 

... in Ihrer Richtlinie hinzu.

Oder, besser, verschieben Sie keyListeners in ihre eigenen Service oder Fabrik und schließen Sie es ein. Etwas wie:

angular.module("myApp").factory("keyListeners", function() { 
    return { 
     // your properties here 
    }; 
}); 

Das ist wie ein Datum Singleton handeln, die Art wie Ihre globalen, zwischen verschiedenen Controllern. Eine Veränderung an einem wird sich in den anderen widerspiegeln. Das ist natürlich genau das Problem, das Sie vermeiden möchten, also können Sie diesem Singleton eine clear() Methode hinzufügen und sie jedes Mal aufrufen, wenn sich Ihre Route ändert oder sogar in Ihrem Controller-Konstruktor.