AngularJS ng-src не обновляет, используя $ watch на $ rootScope

Question

Я использую $ rootScope для получения и обновления аватара. Теперь, когда пользователь обновляет новый аватар, необходимо обновить ng-src, показывая новый аватар, который только что был загружен.

Я понял это, наблюдая за моим $ rootScope.myAvatar, а затем устанавливая $ scope.myAvatar для newValue. К сожалению, ng-src в этом случае не обновляется. Я прочитал много вопросов, касающихся проблем с ng-src и нулевыми значениями, но это всего лишь изменение в области $ scope, и я не понимаю, почему обновление $ scope.myAvatar не вызывает изменения ng-src. Я попытался вручную вызвать $ scope. $ Apply(), он не работает, поскольку $ rootScope все еще переваривается.

router.js:

... 
.when('/account', { 
      'templateUrl': 'components/account/account.tpl.html', 
      'controller': 'accountCtrl as ctrl', 
      'auth': true, 
      'reloadOnSearch': false 
     }) 
... 

контроллера, как Ctrl:

function accountCtrl($scope, $rootScope, accountService) { 
var vm = this; 

accountService.getAvatar().then(function(res) { 
    vm.myAvatar = res; 
}); 

$rootScope.$watch('myAvatar', function (newValue, oldValue) { 
    if (newValue) { 
     vm.myAvatar = $rootScope.myAvatar; 
    } 
}); 

} 

И HTML:

<img ng-src="{{ctrl.myAvatar}}" alt="avatar" width="100" height="100"/> 

Answer 1

Я думаю, что ваша конфигурация маршрутизатора неправильно. Попробуйте следующее:

... 
.when('/account', { 
    'templateUrl': 'components/account/account.tpl.html', 
    'controller': 'accountCtrl', 
    'controllerAs': 'ctrl' 
    'auth': true, 
    'reloadOnSearch': false 
}) 
...