Bootstrap ui angularjs with filter issue

Question

I am using Bootstrap UI in my angular application. I have a tooltip in the html page which works fine. I noticed that after the tooltip is displayed and I move my mouse out, the Ui-bootstrap-tpls.js fires a method called "hideTooltipBind" which in turn calls $apply and it triggers the filters in that scope to reload.

Lets say I have 10 filters in the scope which is filtering an array of 100 each. Everytime a tooltip is displayed, all my filters are forced to reload again. How can I avoid this? I am using

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

I have attached the screenshot of the Call Stack

Answer 1

You can utilise some form of one-time binding. There are multiple options out there:

• bind-once by pasvaz
• angular-once by tadeuszwojcik
• watch-fighters by abourget
• fast-bind by me (fork off of Karl Seamons work)

There are some differences to the four (unrelated to your question at hand however):

• bind-once is the most popular one seeing the most active development. Requires two directives to do the job ( bindonce and bo-* ).
• angular-once is the minimalist of the four (don't quote me on that).
• watch-fighters doesn't handle promise based data.
• fast-bind has a notifier system for semi-static bindings, using the event bus in Angular.

---

Assuming you'd start leveraging either one of them, your bindings could 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 would not reevaluate on Angular calls to $digest . If you are filtering a collection in your view ( <li ng-repeat="coll | filter"></div> ), I'd suggest you move those filters to the controller to reduce the amount of calls to the filters themselves.