模型更改时，AngularJS 不会更新 img src答案

【问题标题】：AngularJS doesn't update img src when model changes模型更改时，AngularJS 不会更新 img src
【发布时间】：2013-07-03 19:10:06
【问题描述】：

我使用ng-src 来加载图像。值是从某个范围变量加载的，如下所示：

<img ng-src="{{currentReceipt.image}}"/>

我的问题是，当我运行delete $scope.currentReceipt 时，它使ng-src 属性为空，但没有反映在src 属性中。因此，我一直在需要空占位符的地方看到该图像。

我该如何处理？

【问题讨论】：

【解决方案1】：

你实际上可以检查长度并做

 <img ng-show="user.thumbnail.length > 1" class="img-circle thumb pull-left" ng-src="{{user.thumbnail}}" alt="{{user.firstname}} {{user.lastname}}">

【讨论】：

【解决方案2】：

以下解决方案适用于我：

<img ng-src="{{currentReceipt.image}}" ng-show="currentReceipt.image != null" />

【讨论】：

【解决方案3】：

在删除 $scope.currentReceipt 后调用 $scope.$apply()。

【讨论】：

【解决方案4】：

这是 ngSrc 和 ngHref 指令的预期行为。这些指令只支持识别新路径，但当路径不可用时，指令将exit silently（我在这里看到了一个拉取请求。）。

因此，一种可能的解决方法是在图像变量不再可用时使用 ngShow 和 ngHref 来完全隐藏标签：

<img ng-href="{{currentReceipt.image}}" ng-show="currentReceipt.image" />

【讨论】：

+1 用于使用ng-show，如果您想完全删除它，您可能还需要考虑使用ng-switch 从 DOM 中删除图像。
谢谢，看来我必须按照你的建议解决它。我查看了管理 ng-src 指令的 Angular 代码，并注意到它只是退出，如果没有给出值，不会删除现有的 src 值或类似的东西。我决定使用 ng-class 来管理这样的案例。谢谢！
我猜作者故意让指令在未定义值时退出，因为删除/清除 src 属性会使浏览器显示损坏的图像缩略图，这并不是真正需要的。