Директива заполнителя изображения Angular js не обновляет src изображения при добавлении новых данных

У меня есть такая директива.. взято отсюда

Как показать замещающее изображение перед реальное изображение загружено?

Директива

angular.module('starter').directive('hires', function() {
  return {
    restrict: 'A',
    scope: { hires: '@' },
    link: function(scope, element, attrs) {
        console.log(scope.hires)
        if(element.attr("pictype")=="dp"){
            element.attr('ng-src', "img/profile-placeholder.png");  
            element.attr('src', "img/profile-placeholder.png");    
        }else if(element.attr("pictype")=="general"){
           element.attr('ng-src', "img/placeholder.png");  
            element.attr('src', "img/placeholder.png");  
        }

        element.one('load', function() {

            element.attr('ng-src', scope.hires);
            element.attr('src', scope.hires);
            element.unbind('load');
        });
    }
  };
})

Я использую это так

<div ng-repeat="img in images">
   <img ng-src="" pictype="general" hires="{{post.images.images[0]}}">
</div>

или вот так

<div ng-repeat="img in images">
   <img ng-src="" pictype="general" hires="{{post.images.images[0]}}">
</div>

отлично работает, когда я сначала загружаю массив с 10 данными с сервера. Все изображения уникальны. но когда я нажимаю или перемещаю новое изображение в массиве images, отображаются последние изображения.

Как обновить директиву.


person Raj Sharma    schedule 17.06.2016    source источник


Ответы (1)


Вам нужно смотреть атрибут, который имеет данные:

angular.module('starter').directive('hires', function() {
    return {
        restrict: 'A',
        scope: { hires: '@' },
        link: function(scope, element, attrs) {
            scope.$watch('hires', function(value) {
                myFunction(value);
            });
            function myFunction(images) {
                //rest of the code from you directive
            }
        }
    }
})
person James    schedule 17.06.2016