中继器中的自定义角度图像指令导致404

Question

我有一个自定义的Angular JS指令,其模板包含一个包含一些引用范围变量的表达式的图像.就像是:

scope:{s:'@'},
template: '<img src="{{s}}" width="200">'

这工作正常,但是当我将我的指令放在转发器中时,我在控制台中得到一个404,看起来像: GET http://run.jsbin.io/%7B%7Bs%7D%7D 404 (Not Found)

这是一个jsbin,我在一个简单的(尽管做作的)例子中复制了这个行为:http://jsbin.com/lavozequ/4/edit？html,js,output

如果您查看JavaScript控制台(不是来自浏览器的JSBin中的那个),您只能看到问题.

我相信这是设计的.我认为转发器在数据绑定之前构建DOM树以提高性能.因此,第一次通过浏览器尝试获取未绑定的元素,该元素是指向不存在的图像的字符串.

我的问题是,我可以创建一个避免这个404的类似指令吗？

Answer 1

如果你有约束力src,请使用ng-src:

scope:{s:'@'},
template: '<img ng-src="{{s}}" width="200">'

Angular将ng-src 在修改src元素之前解析内容,从而避免使用404.