คำสั่งตัวยึดตำแหน่งรูปภาพ Angular js ไม่ได้อัปเดตรูปภาพ src ในการเพิ่มข้อมูลใหม่

ฉันมีคำสั่งเช่นนี้ .. นำมาจากที่นี่

วิธีแสดง placeholder-image ก่อน ดาวน์โหลดภาพจริงแล้วใช่ไหม?

คำสั่ง

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 รายการจากเซิร์ฟเวอร์เป็นครั้งแรก .. รูปภาพทั้งหมดไม่ซ้ำกัน แต่เมื่อฉันกดหรือยกเลิกการเลื่อนรูปภาพใหม่ในอาร์เรย์ รูปภาพ รูปภาพสุดท้ายจะปรากฏขึ้น

ฉันจะรีเฟรชคำสั่งได้อย่างไร


angularjs angularjs-directive
person Raj Sharma    schedule 17.06.2016    source แหล่งที่มา

คำตอบ (1)


arrow_upward
1
arrow_downward

คุณต้องดูแอตทริบิวต์ที่มีข้อมูล:

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