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

ng-src executing even if hidden by ng-if

本文关键字：执行 隐藏 ng-if Ng-src      更新时间：2023-09-26

这是我的问题的一个例子。(这是一个简化的版本，所以它可能包含拼写错误…)

# index.html
<div ng-if="testIfThereIsAnImageToDisplay">
  <img ng-src="{{url}}" imgOnLoad/>
</div>
<span ng-show="imgHasError">Your image has an error</span>

我有一个包含在block中的图像。

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

这是我想要的正确行为。

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

这会导致图像出现错误。所以imgHasError为真。然后显示我的span

是否有一种方法可以避免Angular加载隐藏在ng-if中的图像?

编辑我的坏家伙。我没有意识到我试图在页面的另一部分显示相同的图像。它来自那里。对不起。:)

根据文档的ng-if，如果条件被评估为false，则删除部分DOM。有一种可能性是DOM正在加载，然后计算为true/false。相比之下，ng-switch如果条件被评估为false，则不会事件加载DOM。用ng-switch代替ng-if。

请参阅此处http://jsbin.com/mupegaha/1/edit?html,js,output图片没有加载

再次检查你的testfthereisanimagetodisplay值

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

中设置条件。

如果条件为false, url可能只是''。

# index.html
<div>
  <img ng-src="{{testIfThereIsAnImageToDisplay() && url || urlerror}}" imgOnLoad/>
</div>
<span ng-show="imgHasError">Your image has an error</span>
相关文章：