如何在Angular 1.5组件中正确绑定img onerror事件？

你遇到的问题在于直接用插值表达式{{}}绑定onerror事件的方式是错误的——模板编译时会立即执行$ctrl.onError()，并把返回值（通常是undefined）赋值给onerror属性，而不是在图片加载失败时触发这个方法。

下面是两种正确的绑定方式：

方法一：使用AngularJS的ng-on-error指令（推荐） #

AngularJS提供了统一的ng-on-*系列指令来绑定DOM事件，ng-on-error就是对应原生onerror的指令，直接在指令中传入要执行的控制器方法即可：

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

控制器中保持你的方法定义即可：

ctrl.onError = function () { 
  console.log('图片加载失败！');
  // 这里可以添加自定义逻辑，比如替换为默认图片
  // ctrl.url = '/path/to/fallback-image.jpg';
};

如果需要获取事件对象（比如操作触发错误的img元素），可以把$event作为参数传入：

<img ng-src="{{$ctrl.url}}" ng-on-error="$ctrl.onError($event)"></img>

控制器中接收事件参数：

ctrl.onError = function (event) { 
  console.log('错误发生在元素:', event.target);
  event.target.src = '/path/to/fallback-image.jpg'; // 直接替换当前图片的src
};

方法二：使用原生onerror属性绑定表达式 #

如果你习惯用原生事件属性的写法，也可以直接写onerror，但不要用插值，而是直接写Angular表达式（AngularJS会自动解析）：

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

这种方式需要通过angular.element(this).scope()获取当前作用域，再调用控制器方法，不过相比ng-on-error会更繁琐，所以更推荐第一种方法。

内容的提问来源于stack exchange，提问作者Nicolas S.Xu