Detect 404 image status on angularjs when click on a button

Question

I have the following button directive :

 <button-data></button-data>

the button data directive template is:

<div class="buttonDiv">
<a ng-show="!isSomthing" class="{{className}}" >
</a>
</div>

in another place , I have a canvas (some plugin) that show an image

When clicking on the button I would like to check if the image response is 404 or other broken status and disable the button in that case(event just return in the "link" directive function without doing anything)

I have the image link in the scope of the button directive

Hos could I do that?

thanks

lin · Accepted Answer · 2018-03-12 14:40:11Z

Try to get it before you display it. A simple $http get request is what you are looking for:

View

<div ng-controller="MyCtrl">
  <button load-image image-src="imageSource">check photo</button>
  <button load-image image-src="imageSourceInvalide">check photo</button>
</div>

AngularJS application

var myApp = angular.module('myApp', []);

myApp.controller("MyCtrl", function($scope) {
  $scope.imageSource = 'https://i.imgur.com/hlF1AEug.jpg';
  $scope.imageSourceInvalide = 'https://i.imgur.com/nonono';
});


myApp.directive('loadImage', function($http) {
  return {
    restrict: 'A',
    scope: {
      imageSrc: '='
    },
    link: function(scope, element) {
      element.on('click', function() {
        $http.get(scope.imageSrc).then(function(data) {

          element.append('<img src="' + scope.imageSrc + '">');

        }, function errorCallback(response) {
          console.log('could not load image');
        })
      });
    }
  }
});

> demo fiddle

Collectives™ on Stack Overflow

Detect 404 image status on angularjs when click on a button

1 Answer 1

View

AngularJS application

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

View

AngularJS application

Comments

Your Answer

Sign up or log in

Post as a guest

Related