带过滤器问题的Bootstrap ui angularjs

Question

我在角度应用程序中使用Bootstrap UI.我在html页面中有一个工具提示,工作正常.我注意到在显示工具提示并移出鼠标后,Ui-bootstrap-tpls.js会触发一个名为"hideTooltipBind"的方法,该方法又调用$ apply,它会触发该范围内的过滤器重新加载.

假设我在范围内有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

我附上了调用堆栈的屏幕截图

Answer 1

您可以利用某种形式的一次性绑定。有多种选择：

• pasvaz 的一次绑定
• 角度一次，作者：tadeuszwojcik
• 守望战士by abourget
• 我的快速绑定（Karl Seamons 的工作分叉）

这四个之间存在一些差异（但是与您手头的问题无关）：

• Bind-Once是最流行且开发最活跃的一种。需要两个指令来完成这项工作（bindonce和bo-*）。
• angular-once是这四个中最简单的一个（不要引用我的话）。
• watch-fighters不处理基于承诺的数据。
• fast-bind有一个用于半静态绑定的通知系统，使用 Angular 中的事件总线。

假设您开始利用其中任何一个，您的绑定可能如下所示：

<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>

这样，您的过滤器就不会重新评估 Angular 调用$digest。如果您要在视图 ( ) 中过滤集合<li ng-repeat="coll | filter"></div>，我建议您将这些过滤器移至控制器，以减少对过滤器本身的调用量。