我正在构建的应用程序需要我的用户设置4个信息之前，这个图像甚至有机会加载。这个图像是应用程序的中心部分，所以破碎的图像链接使得它看起来像整个东西是borked。我想要另一个图像在404的地方。
有任何想法吗？我想避免为此写一个自定义指令。
我很惊讶，我找不到一个类似的问题，特别是当第一个问题在文档是同一个！
这是一个非常简单的指令，以观察加载图像和替换src的错误。
(Plunker)
Html：
- <img ng-src="smiley.png" err-src="http://google.com/favicon.ico" />
Javascript：
- var app = angular.module("MyApp",[]);
- app.directive('errSrc',function() {
- return {
- link: function(scope,element,attrs) {
- element.bind('error',function() {
- if (attrs.src != attrs.errSrc) {
- attrs.$set('src',attrs.errSrc);
- }
- });
- }
- }
- });
如果要在ngSrc为空时显示错误图像，可以添加此(Plunker)：
- attrs.$observe('ngSrc',function(value) {
- if (!value && attrs.errSrc) {
- attrs.$set('src',attrs.errSrc);
- }
- });
问题是，如果值为空，ngSrc不会更新src属性。
