Bootstrap ui angularjs with filter

Question

I am using Bootstrap UI in an angular app. I have a tooltip on an html page that works fine. I noticed that after displaying a tooltip and moving the mouse, Ui-bootstrap-tpls.js launches a method called "hideTooltipBind", which in turn calls $ apply, and it runs filters in this area to reload.

Suppose I have 10 filters in an area that filter an array of 100 each. Each time a tooltip is displayed, all my filters are forced to restart again. How can i avoid this? I use

//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js jquery-2.0.3.js ui-bootstrap-tpls-0.11.0.js 

I attached a screenshot of the call window

Answer 1

You can use one form of one-time binding. There are several options:

• bind-once from pasvaz
• angular-once by tadeuszwojcik
• observers from abourget
• fast-bind from me (fork from the work of Karl Simon)

There are several differences from four (not related to your question):

• bind-once is the most popular one that sees the most active development. Two instructions are required to complete the task ( bindonce and bo-* ).
• angular -once is a minimalist of four (don't quote me on this).
• guard fighters do not process the promised data.
• fast-bind has a notification system for semi-static bindings using the event bus in Angular.

---

Assuming you start using one of them, your bindings might look something like this:

 <div bindonce="someData"> <span bo-bind="someData.text | yourFilter"></span> </div> 

---

 <span once-text="someData.text | yourFilter"></span> 

---

 <span set-text="someData.text | yourFilter"></span> 

---

 <span bind-once="someData.text | yourFilter"></span> 

This way your filters will not overestimate Angular calls to $digest . If you filter the collection in your view ( <li ng-repeat="coll | filter"></div> ), I suggest you move these filters to the controller to reduce the number of calls to the filters themselves.