how can I exclude an element from an Angular scope?

Question

my premise was wrong. while AngularJS was certainly slowing things down, it was not due to the problem I describe below. however, it was flim's answer to my question - how to exclude an element from an Angular scope - that was able to prove this.

I'm building a site that generates graphs using d3+Raphael from AJAX-fetched data. this results in a LOT of SVG or VML elements in the DOM, depending on what type of chart the user chooses to render (pie has few, line and stacked bar have many, for example).

I'm running into a problem where entering text into text fields controlled by AngularJS brings Firefox to a crawl. I type a few characters, then wait 2-3 seconds for them to suddenly appear, then type a few more, etc. (Chrome seems to handle this a bit better.)

when there is no graph on the page (the user has not provided enough data for one to be generated), editing the contents of these text fields is fine. I assume AngularJS is having trouble when it tries to update the DOM and there's hundreds SVG or VML elements it has to look through.

the graph, however, contains nothing that AngularJS need worry itself with. (there are, however, UI elements both before and after the graph that it DOES need to pay attention to.)

I can think of two solutions:

1. put the graph's DIV outside the AngularJS controller, and use CSS to position it where it's actually wanted

2. tell AngularJS - somehow - to nevermind the graph's DIV; to skip it over when keeping the view and model in-sync

the second option seems preferable to me, since it keeps the document layout sane/semantic. is there any way to do this? (or some, even-better solution I have not thought of?)

Answer 1

Have you tried ng-non-bindable? http://docs.angularjs.org/api/ng.directive:ngNonBindable

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