$ rootScopeで$ watchを使用してAngularJS ng-srcが更新されない

Question

$ rootScopeを使用してアバターを取得および更新しています。ユーザーが新しいアバターを更新すると、のng-srcも更新され、アップロードされた新しいアバターが表示されます。

コントローラで$ rootScope.myAvatarを見て、$ scope.myAvatarをnewValueに設定することで実現しました。残念ながら、この場合、ng-srcは更新されません。 ng-srcとnull値の問題に関する多くの質問を読んだことがありますが、これは$範囲の単なる変更であり、$ 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 
}) 
...