I have created a code snippet that effectively hides the 'grandparent' element of any '404' images on my webpage. Here is the code:
function hideGrandparent(image){
image.parentNode.parentNode.style.display = 'none';
}
<img ng-src="{{photo.img}}" onerror="hideGrandparent(this);" id="image">
I attempted to transfer this functionality into a custom Angular directive, but encountered some issues with grabbing the correct 'grandparent' element. Here is my current implementation:
Directive:
angular
.module('app')
.directive('hideImage', hideImage);
function hideImage() {
var directive = {
link: link,
restrict: 'A'
};
return directive;
function link(scope, element, attrs) {
element.bind('error', function() {
angular.element(this).parent().parent().attr('style', attrs.hideImage);
})
}
}
HTML:
<div ng-repeat="photo in event.photos">
<a ng-href="{{photo.link}}" target="_blank" title="{{photo.text}}">
<img ng-src="{{photo.img}}" hide-image="'display: none;'" id="image">
</a>
</div>