AngularJS правильный способ обновления данных в контроллере

Question

У меня есть тестовое «привет», показывающее «Hello {{username}}!» или «Привет аноним!». Этот вид имеет свой собственный контроллер и доступен через url (настраивается ui.router).

Тогда у меня есть UserModel с методами setUsername(newUsername) и getUsername().

Существует также просмотр журнала с контроллером, который использует метод setUsername() при успешном входе в систему, а затем переходит к «привет».

код выглядит следующим образом:

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

Существует также кнопка "выйти" в верхней панели. Поэтому для того, чтобы показать изменения в представлении «привет» Я добавил список функций, которые UserModel бы назвать, когда изменяется состояние пользователя:

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

и добавил код в HelloController добавить слушателя к UserModel.onChangesFunctions.

Проблема с этим подходом заключается в том, что 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».

Независимо от того, как вы выбираете, я настоятельно рекомендую избегать связывания служб с конкретной логикой контроллера. Это путь к черту