Closing modal in Angular UI Bootstrap while erasing array of 1000 items, takes a significant time

Question

I've an Angular application where I pass an empty array to Angular-UI Bootstrap Modal. Depends on user choice it may be filled or not with items, up to 1000 objects. All them I display in a list with ng-repeat. All items in a list are pre-generated, so I can't retrieve them asynchronously for example by using plugin like smart-table. When user press ok button all generated values returned to controller from which it was called. Technically all them already there because I pass $scope.items by reference:

resolve: {
        items: function () {
          return $scope.items;
        }
      }

But when I press cancel button I'm erasing all items in an array by invoking $scope.items.length=0; My problem that it takes a while. In my plunker example below it's barely noticeable but noticeable but in my actual application it's much more noticeable and unacceptable.

My guess that It's due to Angular's two-way binding, it takes a time to clean all watchers but I don't know how to solve this issue, if it can be solved.

My MCVE at plunker here: http://plnkr.co/edit/JwanDxBzh3a7ilEX58z8?p=preview

UPDATE: Tried to use one-time binging, plunker here: http://plnkr.co/edit/PjzHRYiuXFHE1M1Pap6U?p=preview

  <li ng-repeat="item in items">
                <a href="#"> {{ ::item | date:'yyyy-MM-dd' }}</a>
            </li>

as described here: https://stackoverflow.com/a/18791503/947111 it didn't help.

Are you doing something more complicated than this in your real modal? Like for instance, doing a $watch inside a directive that's watching each item? — Amy Blankenship
– Amy Blankenship, Commented Feb 3, 2016 at 19:50
No, but I've solved my issue. I've used one-time binding in a wrong way with ng-repeat, see my answer below. — Anatoly
– Anatoly, Commented Feb 3, 2016 at 19:52

Community · Accepted Answer · 2017-05-23 11:52:27Z

1

Ok, I was right and I was almost there with Angular's one-time binding I just used it in a wrong place, and should be used in a ng-repeat in a such way:

 <li ng-repeat="item in ::items">
                    <a href="#"> {{::item | date:'yyyy-MM-dd' }}</a>
                </li>

Thanks to this answer: https://stackoverflow.com/a/23903690/947111

Working plunker located here: http://plnkr.co/edit/XWi6Z0eCXveV58WJfpo6?p=preview

edited May 23, 2017 at 11:52

CommunityBot

11 silver badge

answered Feb 3, 2016 at 19:51

Anatoly

5,28912 gold badges69 silver badges153 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Closing modal in Angular UI Bootstrap while erasing array of 1000 items, takes a significant time

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related