AngularJS ordnungsgemäße Aktualisierung von Daten in Controller

Question

Ich habe eine Test "Hallo" Ansicht zeigt "Hallo {{Benutzername}}!" oder "Hallo anonymer!". Diese Ansicht hat einen eigenen Controller und ist über die URL erreichbar (configure by ui.router). Dann habe ich ein UserModel mit den Methoden setUsername(newUsername) und getUsername().

Es gibt auch eine Protokollierungsansicht mit einem Controller, der die Methode setUsername() für die erfolgreiche Anmeldung verwendet und dann zur Ansicht "hallo" navigiert.

Der Code sieht wie folgt aus:

Hello:

anguler.module('hello', ... 
.config(function($stateProvider){ 
    $stateProvider 
     .state('hello', { 
      url: '/hello', 
      views: { 
       'main@': { 
        controller: 'HelloController as helloController', 
        templateUrl: 'app/hello/hello-tmpl.html' 
       } 
      }, 
     }); 
}) 
.controller('HelloController', function (UserModel) { 
    var helloController = this; 
    helloController.username = UserModel.getUsername(); 
}) 

Es gibt auch einen "Abmelden" Button in der oberen Leiste. Also, um die Änderungen in „Hallo“ Ansicht zu zeigen, habe ich eine Liste der Funktion, die UserModel nennen würde, wenn der Benutzer Zustandsänderungen:

.service('UserModel', function() { 
    var model = this; 

    var username = ''; 
    var onChangesFunctions = []; 

    function onChange() { 
     onChangesFunctions.forEach(function(f) { 
      f(); 
     }); 
    } 

    model.onChange = function(f) { 
     onChangesFunctions.push(f); 
    }; 

    model.setUsername = function(newUsername) { 
     username = newUsername; 
     onChange(); 
    }; 

    model.clearUserData = function() { 
     username = ''; 
     onChange(); 
    }; 

und einen Code in HelloController hat einen Hörer zum UserModel.onChangesFunctions hinzuzufügen.

Das Problem mit diesem Ansatz ist, dass HelloController viele Male initialisiert wird (jedes Mal, wenn der Benutzer zu ihm navigiert) und jedes Mal, wenn es eine neue Funktion als Listener registriert.

Gibt es eine bessere Möglichkeit, Benutzerdaten zu aktualisieren?

Answer 1

Das Problem Ihres Ansatzes ist Speicherlecks. Wie Sie sagten, wenn Ihr Controller zerstört wird und der neue erstellt wird, wird Ihre Funktion weiterhin im Service bestehen und der Controller, der hätte getötet werden sollen, ist wegen der Funktion am wahrscheinlichsten im Speicher.

Ich verstehe nicht klar, was Ihr Ziel ist; aber was Sie tun können, um die Funktionen zu zerstören, wenn die Steuerung zerstört wird:

.controller('HelloController', function (UserModel, $scope) { 
    var helloController = this; 
    helloController.username = UserModel.getUsername(); 

    $scope.$on('$destroy', function() { 
     // either destroy all functions you add to the service queue 
     // or 
     // simply call the controller specific logic here, this will be called when your controller is destroyed 
    }); 
}); 

Ein anderer Ansatz hört auf ‚$ stateChangeStart‘/‚$ stateChangeSuccess‘ Veranstaltung.

Unabhängig davon, wie Sie wählen, würde ich sehr empfehlen, die Bindung von Diensten an die Controller-Instanz-spezifische Logik zu vermeiden. Dies ist ein Weg zur Hölle