单击按钮时检测angularjs上的404图像状态

【问题标题】：Detect 404 image status on angularjs when click on a button单击按钮时检测angularjs上的404图像状态
【发布时间】：2018-03-12 22:40:11
【问题描述】：

我有以下按钮指令：

 <button-data></button-data>

按钮数据指令模板为：

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

在另一个地方，我有一个显示图像的画布（一些插件）

单击按钮时，我想检查图像响应是否为 404 或其他损坏状态并在这种情况下禁用按钮（事件只是在“链接”指令函数中返回而不做任何东西）

我在按钮指令的范围内有图片链接

我可以这样做吗？

谢谢

【问题讨论】：

标签： html angularjs

【解决方案1】：

在展示之前尝试获取它。一个简单的$http 获取请求就是您要寻找的：

查看

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

AngularJS 应用程序

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

【讨论】：