Question

这是我的问题的一个例子。（这是一个简化版本，因此它可能包含拼写错误...）

# index.html

<div ng-if="testIfThereIsAnImageToDisplay">
  <img ng-src="{{url}}" imgOnLoad/>
</div>

<span ng-show="imgHasError">Your image has an error</span>

所以，我有一个图像包含在一个块中。

我通过 imgOnLoad 指令检测到错误。这部分效果很好。每当 ng-src 返回404（或w / e错误）时，我将 imgHasError 变量设置为true。我的跨度显示出来了。

这是我想要的正确行为。

但是，即使 ng-if 测试失败（因为没有要显示的图像），Angular会尝试加载 ng-src 的内容。

这会导致图像出错。所以 imgHasError 是真的。然后显示 span 。

有没有办法避免Angular加载 ng-if 隐藏的图像？

编辑我的坏人。我没有意识到我试图在页面的另一部分显示相同的图像。它来自那里。抱歉。：）

Answer 1

根据文档ng-if如果条件被评估为false，则删除DOM的部分。有可能加载DOM然后评估为真/假。相比之下，ng-switch如果条件被评估为false，则不会事件加载DOM。尝试ng-switch而不是ng-if。

Answer 2

请看这里http://jsbin.com/mupegaha/1/edit?html,js,output 图片根本没有加载。

仔细检查testIfThereIsAnImageToDisplay值

Answer 3

您可以在ng-src：condition && srcifconditiontrue : srcifconditionfalse

中设置条件

url if条件为false可能只是''。

# index.html

<div>
  <img ng-src="{{testIfThereIsAnImageToDisplay() && url || urlerror}}" imgOnLoad/>
</div>

<span ng-show="imgHasError">Your image has an error</span>

ng-src即使被ng-if隐藏也会执行

3 个答案: