AngularJSコントローラのデータを更新する適切な方法

Question

「Hello {{username}}」を示すテスト「hello」ビューがあります。または "Hello anonymous！" このビューには独自のコントローラがあり、url（ui.routerで設定）経由でアクセスできます。

次に、メソッドsetUsername(newUsername)とgetUsername()を持つUserModelがあります。

成功してログインするためにsetUsername()メソッドを使用してコントローラを「hello」ビューに移動すると、ロギングビューも表示されます。

コードは次のようになります。

HelloController：

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

もトップバーにある "ログアウト" ボタンがあります。

.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(); 
    }; 

とUserModel.onChangesFunctionsにリスナーを追加するためにHelloControllerにコードを追加しました：だから、「こんにちは」ビューの変化を示すために、私はUserModelの際にユーザー状態の変更を呼ぶであろう機能のリストを追加しました。

このアプローチの問題点は、HelloControllerが何度も（ユーザーがナビゲートするたびに）、リスナーとして新しい機能を登録するたびに初期化されることです。

ユーザーデータを最新の状態に更新する方法はありますか？

Answer 1

あなたのアプローチの問題はメモリリークです。あなたのコントローラが破壊され、新しいものが作成されたときに言ったように、あなたの関数はまだサービスに残っていて、殺されていたはずのコントローラはその関数のためにメモリ内にある可能性が最も高いです。

私はあなたの目標が何であるかを明確に理解していません。しかし、どのようなコントローラが破壊されたときに、機能を破壊している行うことができます別のアプローチは、聴いている

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

を「$ stateChangeStart」/「$ stateChangeSuccess」イベントに。

どのような方法を選択しても、コントローラインスタンス固有のロジックにサービスをバインドしないよう強くお勧めします。これは地獄への道です