Question

我有以下按钮指令：

 <button-data></button-data>

按钮数据指令模板是：

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

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

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

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

Hos我可以这样做吗？

谢谢

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

<强>＆GT; demo fiddle

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

1 个答案:

视图

AngularJS应用程序