Angular js图像占位符指令在添加新数据时不更新图像src

Question

我有这样的指令.. 取自这里

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

指令

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 中推送或取消移动新图像时，会显示最后的图像。

如何刷新指令。

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