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

我有以下按钮指令：

 <button-data></button-data>

按钮数据指令模板为：

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

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

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

• 我有按钮指令范围内的图像链接

我能那样做吗

---

谢谢

请在显示之前尝试获取它。您需要的是一个简单的

$http

get请求：

看法

核对照片
核对照片

AngularJS应用程序

var myApp=angular.module（'myApp'，[]）；
控制器（“MyCtrl”，函数（$scope）{
$scope.imageSource=https://i.imgur.com/hlF1AEug.jpg';
$scope.imageSourceInvalide='0https://i.imgur.com/nonono';
});
myApp.directive（'loadImage'，函数（$http）{
返回{
限制：“A”，
范围：{
imageSrc:“=”
},
链接：功能（范围、元素）{
元素上（'click'，function（））{
$http.get（scope.imageSrc）.then（函数（数据）{
元素。追加（“”）；
}，函数errorCallback（响应）{
log（'无法加载映像'）；
})
});
}
}
});

>

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

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');
        })
      });
    }
  }
});