从函数调用加载Angularjs ng-src异步图像

时间:2014-05-08 00:13:54

标签: angularjs asynchronous

我想知道是否可以将函数调用的结果分配给图像中的ng-src?

基本上,我需要从aspx页面检索一组数据的缩略图集,可能有也可能没有缩略图。因此,当缩略图页面没有返回任何内容时,我需要为一个案例显示不同的预设图像。

这样的事情:

<img ng-src="getThumbnail({{ item.Id }})" />

其中getThumbnail是一个向网址发出http请求的函数,例如

http://localhost/Srv/getThumbnail.aspx?id=111

我试过这个,但Angular正在制作这个:

<img ng-src="getThumbnail(111)" src="getThumbnail(111)">

而不是调用函数。有没有更好的方法来做到这一点?

1 个答案:

答案 0 :(得分:9)

我对您的问题发表了评论,但在查看AngularJS文档后,我会提出我的建议作为解决方案。 ng-src指令会正确设置src的{​​{1}}属性。该指令可以包含Angular expressions,它们可以调用控制器中包含的函数,并且可以在当前作用域中访问。因此,而不是:

img

试试这个:

<img ng-src="getThumbnail({{ item.Id }})" />

在前一个声明中,该函数不适用于Angular范围,但它位于后者中。 (如果我没有记错,因为我自己没有尝试过代码)。

确保<img ng-src="{{ getThumbnail(item.Id) }}" /> 函数位于可以访问当前范围的控制器中。