javascript - onerror 适用于 ng-src 但不适用于 anchor 标记

Question

目标:如果没有可用图像，则在 anchor 标记上显示默认图像

onerror 可以在 ng-src 上运行，但不能运行

不工作

<li class=""><a href="http://imagepath/correct.jpg" id="hrefID"      onerror="this.src='http://imagepath/default.jpg'  "title="default image"</a>

这可以工作，但不可点击

  <img alt="1" ng-   src="http://imagepath/correct.jpg" onerror="this.src='http://imagepath/default.jpg '"title="default image" />

Answer 1

Angular 指令 ngSrc 没有任何用于处理 404 响应的 native 功能。

所以你可以尝试这样:

<div ng-controller="MyCtrl">
    <div ng-repeat="image in images">
        <img ng-src="{{image}}" on-error="http://google.com/favicon.ico"/>
    </div>
</div>


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

myApp.directive('onError', function() {
  return {
    link: function(scope, element, attrs) {
      element.bind('error', function() {
        if (attrs.src != attrs.onError) {
          attrs.$set('src', attrs.onError);
        }
      });
    }
  }
});

myApp.controller("MyCtrl", function($scope) {
    $scope.images = [
        'http://www.titanui.com/wp-content/uploads/2013/11/30/Flat-AngularJS-Logo-PSD.png',
        'any.png' //WRONG URL
    ];
});
</script>

Fiddle