Question

以下代码仅适用于角度1.X

ctrl.onError = function () {
....
}




<div ng-show="$ctrl.isInit">
     <img ng-src="{{$ctrl.url}} onerror="{{$ctrl.onError()}}"></img>
</div>

我想处理这个错误事件，但它不会起作用。如何正确附加onerror事件处理程序？

Answer 1

您可以构建一个简单的指令，如

（我用它来装载器）

function myLoader() {
  return {
    restrict: 'A',
    link(scope, element) {

      element.on('load', () => {

      });
      element.on('error', () => {

      });
    }
  };
}

USAGE

<img
      ng-src="{{$ctrl.filename}}"
      alt="{{$ctrl.current.filename}}"
      my-loader/>

Answer 2

如果你只有一个img in组件，你可以：

$element.find('img').bind('error', () => {
   // handle...
   $scope.$apply();
})

或者您可以按照建议使用指令并传递组件回调：

// directive myError
function myLoader($parse) {
  return {
    restrict: 'A',
    link(scope, element, attrs) {
      element.bind('error', () => {
        $parse(attrs.myError)(scope);
      });
    }
  };
}
<img my-error="$ctrl.onError()"></img>

如何在Angular 1.5组件中处理img onerror事件

2 个答案: