如何使用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开发者工具的"网络"选项卡并检查图片下载 -- 你会看到错误，因为浏览器仍然试图下载不存在的图片。它被隐藏了，用户不会注意到，但这当然是不好的：不良惯例，对服务器性能不利，非常不好...

那么正确的 "Angular" 解决方案是什么？

- Max Favilli

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>

请参考 @Rob 的回答，示例中使用了 ng-if。

- Mark Rajcok

---

提示：根据Misko在https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js#L35中的说法，ngShow和ngHide将更改DOM而不是使用"display：none;"。 - Umur Kontacı

@Umur - 我想你指的是1.1.5版本中可用的ngIf指令。https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944 - Rob Bygrave

@Rob，它已经改变了，但是看一下几个月前的源代码：https://github.com/angular/angular.js/blob/11f712bc3e310302eb2e8691cf6d110bdcde1810/src/ng/directive/ngShowHide.js#L101 - Umur Kontacı

Answer 2

从版本1.1.5开始，您可以像@Abilash建议的那样使用ng-if：

<img ng-if="p.img" ng-src="/images/{{p.img}}"/>

- Rob Bygrave

Answer 3

你可以像这样做：

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


app.filter('imgsrc', function(){
    return function(data){
        var a = [];
        angular.forEach(data, function(v, i){
            if(v.img){
                a.push(v);
            }
        });
        return a;
    }
});

演示：Fiddle

- Arun P Johny

---

为什么不使用在angular-ui.js中定义的ui-if呢？ - Abilash

可能是因为它是另一个库？ - Umur Kontacı