如何真正防止元素被angularjs放入DOM中

Question

假设您有以下代码来显示某些产品图片:

<ul>
  <li ng-repeat="p in products">
    <img ng-src="/images/{{p.img}}"/>
  </li>
</ul>

现在让我们假设一些产品没有图像,你可以解决这个问题:

<ul>
  <li ng-repeat="p in products">
    <img ng-hide="p.img==undefined" ng-src="/images/{{p.img}}"/>
  </li>
</ul>

现在转到firebug或chrome开发人员工具的"网络"选项卡并检查图像下载 - 您将看到错误,因为浏览器仍尝试下载不存在的图像.它是隐藏的,用户不会注意到,但当然它很糟糕:糟糕的做法,糟糕的服务器性能,糟糕的坏坏...

什么是正确的"角度"解决方案？

Answer 1

@Arun 解决方案的替代方案是使用ng-switch或ng-if（在 v1.1.5 中提供），它们添加/删除 DOM 元素，与 ng-hide/ng-show 不同：

<ul>
  <li ng-repeat="p in products">
    <span ng-switch="p.img==undefined">
      <img ng-switch-when="false" ng-src="/images/{{p.img}}"/>
    </span>
  </li>
</ul>

有关使用 ng-if 的示例，请参阅@Rob 的答案。