用ng-src在img上删除（），边框仍然存在吗？

Question

I have some ng-repeated images.

<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 */
  }

Some of {{data.image}} is null. I want to remove those.

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

However when i do this the 1px border i have on the images still remains?

before this i had a ng-if statement (ng-src != null), but i found out that was too expensive in angular watchers.

https://jsfiddle.net/8ykrkc3c/

Answer 1

try this

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

Edit:

you can use custome dirctive for this.

 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> 

Answer 2

Your onerror handler is incorrect. Note, that it's no longer Angular attribute and hence you can't use angular.element.prototype.remove method. Instead you need to go with good old native DOM methods, in your case removeChild :

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

Demo: https://jsfiddle.net/8ykrkc3c/2/