如何从Angular作用域中排除一个元素？

Question

我的前提是错误的。虽然AngularJS确实减缓了速度，但并不是由于我下面描述的问题。然而，是Flim回答了我的问题——如何从Angular作用域中排除一个元素——才能证明这一点。

我正在构建一个使用d3+Raphael从AJAX获取数据生成图表的站点。这会导致DOM中有很多SVG或VML元素，具体取决于用户选择要呈现的图表类型（例如，饼图只有很少的SVG/VML元素，线性和堆积条形图则有许多）。

在使用AngularJS控制的文本字段中输入文本时，我遇到了一个问题：Firefox变得非常缓慢。我输入几个字符，然后等待2-3秒，它们突然出现，然后再输入几个字符，以此类推。（Chrome似乎处理得更好些。）

当页面上没有图表时（用户未提供足够的数据来生成图表），编辑这些文本字段的内容就很好。我认为当AngularJS试图更新DOM并且有数百个SVG或VML元素需要查找时，它会遇到麻烦。

然而，图表中并没有AngularJS需要担心的内容。 （但是，在图表之前和之后都有UI元素需要其关注。）

我可以想到两个解决方案：

1. 将图表的DIV放在AngularJS控制器之外，并使用CSS将其定位到实际所需的位置

2. 告诉AngularJS - 以某种方式 - 不要担心图表的DIV；在保持视图和模型同步时跳过它

对我来说，第二个选择似乎更可取，因为它使文档布局合理/语义化。 是否有任何方法可以做到这一点？（或者，我没有想到的一些更好的解决方案？）

- Ben

---

你试过ng-non-bindable吗？http://docs.angularjs.org/api/ng.directive:ngNonBindable - Foo L

你认为为什么Angular必须查看所有SVG/VML元素？这些元素是由Angular生成的吗？如果不是，那么Angular就不会查看它们。Angular只编译HTML文档(DOM)一次：http://docs.angularjs.org/guide/concepts#startup - Mark Rajcok

ng-non-bindable正是我一直在寻找的！但这也证明了Mark所说的：Angular实际上并不因Raphael生成的SVG/VML而变慢。忽略这个块并没有帮助。由于这个问题在Chrome中不存在，而Firebug的分析器比Chrome的信息少，很难确定减速的确切位置...我会继续挖掘。虽然如此，我真的很想给flim完全的信用，因为他回答了我的最初问题。 - Ben

我会把它放在答案里，你可以接受它。 :) - Foo L

@Ben 你好，你最终找出了减速问题的原因吗？ - Nikos

@Nikos 我真的没有任何记忆 - 抱歉 :| 我希望我能更有帮助，但那是几个月前的事了，自那时以来我们已经完成了其他几个项目（每天都有新的问题需要解决！） - Ben

Answer 1

你尝试过使用ng-non-bindable吗？ http://docs.angularjs.org/api/ng.directive:ngNonBindable

<ANY ng-non-bindable>
   ...
</ANY>

- Foo L

---

我遇到了一个问题，涉及到一个包含Liquid模板变量的CKEditor实例。即使输入框没有绑定到Angular中的任何内容，Angular仍然会插值这些变量。添加ng-non-bindable解决了这个问题。谢谢！ - Sean Hill