remove() on img with ng-src, border remains?

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/

dfsq · Accepted Answer · 2016-04-25 08:10:07Z

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/

Your demo uses ng-src instead of src. Because there is no Angular in your demo ng-src doesn't mean and do anything, as the result there is no src attribute. And onload/onerror events are not fired for img element in case if there is no src.

Hadi · Accepted Answer · 2016-04-25 08:18:21Z

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>

with that amount of data i have, a ng-if is gonna be expensive in watchers.
@AndersPedersen You could also one time bind it, if the src's won't change

Collectives™ on Stack Overflow

remove() on img with ng-src, border remains?

2 Answers 2

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Linked

Related