刪除（）在img與ng-src，邊界仍然是？

我有一些重複的圖像。刪除（）在img與ng-src，邊界仍然是？

<img ng-src="{{::data.image}}" />

CSS：

.thumbnailImage { 
    width: auto; 
    max-width: 20px; 
    height: auto; 
    max-height: 20px; 
    border: 1px solid lightslategrey; 
    position: relative; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    background-color: white; /* in case of png */ 
    }

一些{{data.image}}爲空。我想刪除這些。

<img ng-src="{{::data.image}}" onerror="this.remove()" />

但是，當我這樣做的1px的邊界，我對圖像仍然存在？

在此之前，我有一個ng-if語句（ng-src！= null），但是我發現這在角度觀察者中太昂貴了。

https://jsfiddle.net/8ykrkc3c/

來源

2016-04-25 Anders Pedersen

試試這個

<div ng-if="data.image"> 
    <img ng-src="{{::data.image}}" /> 
</div>

編輯：

您可以使用custome dirctive這一點。

angular.module("app", []) 
 
    .controller("MainCtrl", function($scope) { 
 
    $scope.value = "https://www.google.co.in/images/srpr/logo11w.png"; 
 
    // $scope.value = "null"; 
 
    }) 
 
    .directive('custSrc', function() { 
 
    return { 
 
     restrict: "A", 
 
     scope: { 
 
     value: "=custSrc" 
 
     }, 
 
     link: function(scope, element, attrs) { 
 
      if(scope.value == 'null') 
 
      element.parent().addClass('hide'); 
 
      else 
 
      element.attr('src', scope.value); 
 
     
 
     console.log(element); 
 

 
     } 
 
    }; 
 
    });

.hide{ 
 
    display:none; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MainCtrl"> 
 
    <img cust-src="value" /> 
 
</div>

來源

2016-04-25 07:38:39

與數據的量，我有，一NG，如果是要在觀察家昂貴。 –

所以請使用custome指令。 –

@AndersPedersen你也可以一次性綁定它，如果src不會改變 –

你的onerror處理程序不正確。請注意，它不再是Angular屬性，因此您不能使用angular.element.prototype.remove方法。相反，你需要去用好老的原生DOM方法，你的情況removeChild：

<img class="asd" ng-src="{{::data.image}}" onerror="this.parentNode.removeChild(this)" />

演示：https://jsfiddle.net/8ykrkc3c/2/

來源

2016-04-25 08:07:16 dfsq

你的演示使用'ng-src'而不是'src'。因爲演示中沒有Angular，所以'ng-src'並不意味着什麼也不做，因爲沒有'src'屬性。如果沒有src，onload/onerror事件不會被img元素觸發。 – dfsq

刪除（）在img與ng-src，邊界仍然是？

回答

相關問題