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.
我在角度应用程序中使用Bootstrap UI。我在html页面中有一个工具提示,工作正常。我注意到在显示工具提示并移出鼠标后,Ui-bootstrap-tpls.js会触发一个名为“hideTooltipBind”的方法,该方法又调用$ apply,它会触发该范围内的过滤器重新加载。
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
假设我在范围内有10个过滤器,它们每个过滤100个数组。每次显示工具提示时,都会强制我的所有过滤器重新加载。我怎么能避免这个?我在用
//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
我附上了Call Stack的截图
1 个解决方案
#1
0
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)
由pasvaz绑定一次
角度一次由tadeuszwojcik
abourget的战士
快速绑定我(从Karl Seamons工作分叉)
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 (
bindonceandbo-*). - 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.
bind-once是最受欢迎的开发者。需要两个指令来完成这项工作(bindonce和bo- *)。
angular-once是这四个中的极简主义者(不要引用我的话)。
手表战士不处理基于承诺的数据。
fast-bind有一个用于半静态绑定的通知程序系统,使用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.
这样,您的过滤器就不会重新评估对$ digest的Angular调用。如果您要在视图中过滤集合(
#1
0
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)
由pasvaz绑定一次
角度一次由tadeuszwojcik
abourget的战士
快速绑定我(从Karl Seamons工作分叉)
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 (
bindonceandbo-*). - 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.
bind-once是最受欢迎的开发者。需要两个指令来完成这项工作(bindonce和bo- *)。
angular-once是这四个中的极简主义者(不要引用我的话)。
手表战士不处理基于承诺的数据。
fast-bind有一个用于半静态绑定的通知程序系统,使用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.
这样,您的过滤器就不会重新评估对$ digest的Angular调用。如果您要在视图中过滤集合(