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

Question

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

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

像这样的东西:

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

getThumbnail是一个向URL发出http请求的函数,例如

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

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

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

而不是调用函数.这样做有更好的方法吗？

Answer 1

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

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

试试这个:

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

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

确保该getThumbnail函数位于可访问当前范围的控制器中.