2013-06-12 10 views
9

私の前提が間違っていた。 AngularJSは確実に物事を減速させていましたが、私が以下に述べる問題のためではありませんでした。しかし、それは私の質問に、フリームの答えだった - どのように角度のスコープから要素を除外する - これを証明することができた。Angularスコープから要素を除外するにはどうすればよいですか?

私は、AJAX取得データからd3 + Raphaelを使用してグラフを生成するサイトを構築しています。これは、ユーザがレンダリングするどのタイプのチャート(パイにはいくつかのラインがあり、積み重なったバーには多くのものがある)に応じて、DOMにSVGまたはVML要素がたくさんあります。

AngularJSが管理するテキストフィールドにテキストを入力すると、Firefoxがクロールされるという問題が発生しています。私はいくつかの文字を入力し、突然現れるように2〜3秒待ってからもう少しタイプします(クロムは少しこれをよりよく扱うようです)。

ページにグラフがない場合ユーザーが生成するのに十分なデータを提供していない場合)、これらのテキストフィールドの内容を編集するのは問題ありません。 I DOMを更新しようとするとAngularJSに問題があり、見るべき数百のSVGまたはVML要素があります。

しかし、グラフにはAngularJSが心配する必要はありません。 (UI要素は、それがに注意を払う必要がないこと、グラフの前と後の両方、しかし、があります。)

は、私は2つの解決策を考えることができます。

  1. はAngularJSコントローラの外にグラフのDIVを置きますCSSを使って実際にどこに配置したいのですか?

  2. tell AngularJS - 何らかの形でグラフのDIVを気にしないでください。ビューとモデルを同期して保持するときにスキップするには

2番目のオプションは、ドキュメントのレイアウトの意味/意味を保持するので、私には好ましいと思われます。これを行う方法はありますか? (または、私が考えていないより良い解決策がありますか?)

+2

ng-non-bindaleを試しましたか? http://docs.angularjs.org/api/ng.directive:ngNonBindable –

+1

なぜ、AngularはすべてのSVG/VML要素を調べなければならないと思いますか?これらの要素はAngularによって生成されますか?そうでない場合、Angularはそれらを見ていません。 AngularはHTMLドキュメント(DOM)を一度コンパイルするだけです。http://docs.angularjs.org/guide/concepts#startup –

+0

ng-non-bindableは私が探していたものです! でもMarkが言っていることを証明しています。Raphaelによって生成されたSVG/VMLのためAngularは実際には遅くはありません。このブロックを無視することは役に立ちません。 問題はChromeには存在しないため、FirebugのプロファイラはChromeの情報よりも有益ではないため、どこが減速しているのかを正確に伝えるのは難しいです。 私は最初の質問に答えるためにフリムをフルクレジットしたいと思っています。 – Ben

答えて

16

ng-non-bindableを試しましたか? http://docs.angularjs.org/api/ng.directive:ngNonBindable

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

Liquidテンプレート変数を保持するCKEditorインスタンスで問題が発生しました。 Angularは、入力がAngularの何かに束縛されていなくても変数を補間していました。 'ng-non-bindable'を加えることで修正されました。ありがとうございました! –

+0

あなたは大歓迎です! –

関連する問題