AngularJS - 基於過濾器更改隱藏Dom元素的更好實現

Question

我正在編寫一個示例應用程序，使用AngularJS顯示一組youtube視頻並根據語言過濾視頻。我綁定ngFilter的用戶操作並基於此隱藏和顯示過濾器。

Please see JS Fiddle for code ==> http://jsfiddle.net/saratchandramrs/kxk9p/ 

如果把DOM操作代碼的理想場所，是對每個指令這AngularJS後 - click here

我應該做的，在我的例子中，指令的東西嗎？或者它會是一種矯枉過正的行爲，還是有人能夠幫助我理解我是否按照AngularJS原則正確執行了這項工作？或者如果有更好的方式來做我正在做的事情？

此外，每次過濾器值更改，DOM重新加載，有沒有一種方法可以完成這個功能，無需重新加載？或者它就像隱藏基於過濾器值的單個元素（類似於CSS樣式：「display：none」）？

備註：我使用Bootstrap 3進行UI樣式設計。

感謝您的指導。

Answer 1

性能問題在於您在指令中爲youtube加載了iframe。每次你過濾，從YouTube加載數據。你看到http://devgirl.org/2013/03/21/fun-with-angularjs/？