Angular js image placeholder directive not updating image src on adding new data

Question

I have a directive like this.. taken from here

How to show a placeholder-image before the real image is downloaded?

Directive

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');
        });
    }
  };
})

I use it like this

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

or like this

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

works fine when I first the load the array with 10 data from the server.. all images are unique. but when I push or unshift a new image in the array images the last images is shown.

How do I refresh the directive.

score 1 · Answer 1 · answered Jun 17 '16 at 15:55

You need to watch the attribute that has the data:

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
            }
        }
    }
})

Angular js image placeholder directive not updating image src on adding new data

1 Answers1