In my AngularJS component, I have a value stored in the scope that provides a URL to an <img> element in the view. Whenever a user changes the image, the controller emits a change using $rootScope.$emit, causing the URL value to update. Ideally, the view should also update to display the newly uploaded image:
angular.module('ppApp').component('mainnav', {
templateUrl: 'app/templates/nav/nav.main-nav.tpl.htm',
controller: ['$scope', function($scope){
vm.avatarimage = '../p3sweb/avatarImage';
$rootScope.$on('refreshAvatar', function(){
console.log('change avatar')
vm.avatarimage = '../p3sweb/avatarImage';
})
}]
})
//Controller
$rootScope.$emit('refreshAvatar',function(){ //value refreshAvatar emitted when they have loaded new image
})
//view
<img data-ng-src="{{$ctrl.avatarimage}}" alt="users profile pic" class="profile-pic-radius">
Although the emission is detected and the message 'change avatar' is logged, the image does not update unless I manually refresh the page.
Query
How can I trigger a refresh specifically for the component so that it updates the scope and displays the newly uploaded image?