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

比方說，你有下面的代碼來顯示一些產品圖片：如何真正防止元素被放入DOM與angularjs

<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>

現在去的螢火蟲或Chrome開發者工具的「網絡」選項卡，並檢查圖像下載 - 你會看到錯誤的，因爲瀏覽器仍然試圖下載不存在的圖片。它隱藏，並且用戶不會注意到，但當然是不好：不好的做法，不利於服務器性能，很壞很壞的壞...

，這是什麼正確的「角」的解決方案？

來源

2013-03-16 Max Favilli

到@阿朗的解決方案是使用ng-switch或ng-if（V1.1.5中提供），其中添加/刪除DOM元素的替代，不像NG隱藏/ NG-顯示：

<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-如果一個例子。

來源

2013-03-16 16:29:21

提示：據MISKO在https://github.com/angular/angular.js/blob/master/src/ng/directive/ngShowHide.js#L35：ngShow和ngHide打算用做改變DOM，而不是' display：none;' – 2013-03-16 17:46:12

@Umur - 我想你的意思是1.1.5中的ngIf指令。 https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944 – 2013-08-05 22:48:02

@Rob，它已經改變了，但看看從幾個月的源代碼前：https://github.com/angular /angular.js/blob/11f712bc3e310302eb2e8691cf6d110bdcde1810/src/ng/directive/ngShowHide.js#L101 – 2013-08-06 06:05:07

你可以做這樣的事情

<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

來源

2013-03-16 15:50:37

爲什麼不UI，如果這角ui.js定義？ – Abilash 2013-03-16 16:44:25

也許是因爲它是另一個圖書館？ – 2013-03-16 18:27:36

隨着1.1.5版，您可以使用NG-如果作爲@Abilash提示：

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

來源

2013-08-05 23:11:02

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

回答

相關問題