Компонент не обновляет область видимости в $ emit

Question

У меня есть компонент в AngularJS, со значением, сохраненным в области, которая предоставляет URL для <img> в представлении. Когда пользователь меняет изображение, контроллер выдает изменение через $rootScope.$emit, и значение URL-адреса обновляется, и поэтому представление, отображающее новое загруженное изображение, должно отображаться так:

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">

Излучение принимается и«изменение аватара» зарегистрировано, но изображение не обновляется меньше. Я обновляю страницу.

Вопрос

Как обновить только компонент, чтобы он обновлялсяобласть и отображает новое изображение, которое только что было загружено?

Answer 1

Это не проблема Angular.js, но вам нужен трюк для обновления изображения, поскольку тег img не будет обновляться до тех пор, пока не будет изменен его источник.

Вы можете добавить метку времени в концеURI источника изображения.

...
    $rootScope.$on('refreshAvatar', function(){
        console.log('change avatar')
        // SEE HERE!!!
        var timestamp = new Date().getTime();
        vm.avatarimage = '../p3sweb/avatarImage' + '?' + timestamp;
    })
...