简体繁体 English

AngularJS：不要在DOM更改上运行ng-repeat

[英]AngularJS: Don't run ng-repeat on DOM change

原文 2017-01-23 08:43:08 0 2 javascript/ jquery/ angularjs/ dom

I got the following problem: 我遇到以下问题：

I have a SPA with AngularJS 1.6.1 and using ng-view to implement some views. 我有一个AngularJS 1.6.1的SPA，并使用ng-view来实现一些视图。 I have one view where I add the "UniteGallery" with my own directive within an ng-repeat. 我有一个视图，可以在ng-repeat中用自己的指令添加“ UniteGallery”。 So the unitegallery gets loaded dynamically 15 times. 因此，unitegallery会动态加载15次。 This works well so far. 到目前为止，效果很好。

However, I have a mobile menu, which I toggle by clicking on a button. 但是，我有一个移动菜单，可通过单击按钮来切换。 This works well, too. 这也很好。 I simply set a class for the menu div with ng-class, depending on whether the menu is open or hidden. 我只是通过ng-class为菜单div设置了一个类，具体取决于菜单是打开还是隐藏。

This is, ofcourse, changing my dom. 当然，这正在改变我的家。 My problem is, that with changing the dom, the ng-repeat is run again. 我的问题是，随着dom的更改，ng-repeat再次运行。 This is causing flickering and performance issues. 这会导致闪烁和性能问题。

Is there a way to change the dom without the ng-repeat being run over and over again? 有没有一种方法可以更改dom，而又不会一遍又一遍地重复ng-repeat？

2 个解决方案

If you don't want to reload the ng-repeat binding, (with the corresponding dom reload) you can use One Time Bindings 如果您不想重新加载ng-repeat绑定（以及相应的dom重新加载），则可以使用一次绑定

Just use 只需使用

:: ::

before the binding, just likes this: 绑定之前，就像这样：

ng-repeat="photo in ::gallery" ng-repeat =“在:: gallery中的照片”

This will make the $scope.gallery be binded to the view only once 这将使$ scope.gallery仅绑定到视图一次

https://docs.angularjs.org/guide/expression https://docs.angularjs.org/guide/expression

Addition to Daniel Santiago's answer: If you wish to hide "flickering" that was mentioned in your question, you should use ng-cloak . 除了Daniel Santiago的答案：如果您想隐藏问题中提到的“闪烁”，则应使用ng-cloak 。

More on ngCloak . 有关ngCloak的更多信息。