带过滤器问题的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

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

• bind-once by pasvaz
• angular-once来自tadeuszwojcik
• watch-fighters by abourget
• fast-bind由我（离开Karl Seamons工作）

这四种情况存在一些差异（与您手头的问题无关）：

• bind-once 是最受欢迎的开发者。需要两个指令才能完成工作（bindonce和bo-*）。
• angular-once 是四人中的极简主义者（不要引用我的话）。
• 智能手表无法处理基于承诺的数据。
• 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>

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