私は現在angular jsを約4か月間使用しています.anuglarが考える非同期の方法を強調しないなどのすべての「最初のステップの失敗」にもかかわらず、私はよくわからない問題に直面しています。説明するのはそれほど簡単ではありません。
構成フェーズ中に、ルートプロバイダーの解決機能内にディレクティブを登録するプロバイダーがあります。プログラムで事前構成されたディレクティブをコンパイルするには、各ルートの特定のコントローラー呼び出しでそれらを作成します。実際、ここで扱っているディレクティブは、複雑なフローチャート ディレクティブです。残りの API からデータを取得し、取得したデータを変換し、適切な積み上げ折れ線グラフや単純な円グラフなど、さまざまな種類のオプション設定を準備します。すべてのステップには時間がかかるため、最終的に「$.plot」などを呼び出す前に、すべてが適切な場所にあることを確認する約束を導入しました。
2 つのタブを持つ単一ページのアプリを想像してみてください。各タブは、最初のクラスのメニュー項目のように、処理する新しいコントローラーとレンダリングする新しいパーシャルを含む新しいページを参照します。ページごとに、他のディレクティブの横に、レンダリングするこれらの重いフローチャート ディレクティブの 1 つがあります。実際には、チャートをレンダリングするのに約 5 秒かかります。したがって、F5 キーを押すように、実際にアプリを最初から開始すると仮定します。ここで、初めて最初のページに入り、前述の 5 秒以内にタブを切り替えて次のページに入ります。次のページに移動し、さまざまなパーシャル、レイアウト、および読み込みチャートを確認しますが、実際には、最初のページのディレクティブは、その重い flotchart ディレクティブのリンク フェーズにまだバインドされています (flot のオプションを準備し、出力するデータを計算します)。グラフィカルに）。
私の問題は、このリンク フェーズが実際には完全に異なるテンプレート/ルート/コントローラー コンテキスト内で実際に終了し、スタックすることです。jquery.flot からのコンソールの「置換」エラーでクラッシュします。このエラーは、 flot がもう存在しない div にプロットしようとしていることを意味していると思います。しかし、そのエラーは、最初のページの重い flot ディレクティブのリンク段階でタブを切り替えたときに発生します。最初のページのチャートが完全にレンダリングされているときは発生せず、最初のページのディレクティブがリンク段階に入っていないときも発生しません (または何か不足していますか??)。jquery "$.plot" を実行する前に、いくつかの console.logs を直接配置しようとしました。そして奇妙なことに、この魔法の 5 秒以内にタブを切り替えると、別のページにいるにもかかわらず、最初のページ エントリからコンソール ログ エントリが取得されます。そして今、何を推測します。これは奇妙です。実際には、2 つのディレクティブ リンク フェーズが並行して実行されており、そのうちの 1 つは完全に異なるビューで実行されています (または、単一ページ アプリであるため、完全に異なるのではないでしょうか?)。$('#flot-chart') のように、まったく同じ div id でグラフをプロット (「レンダリング」) するとします。そのため、最初のページと 2 番目のページに id="flot-chart" を含む html パーツがあります。最初のページから 2 番目のページに切り替えると (最初のチャートを終了していない)、2 番目のページの #flot-chart div でレンダリングされた最初のページからチャートを取得し、0.5 秒後に実際に正しいチャートがレンダリングされます。その同じdiv。したがって、実際には、最初のページのチャート ディレクティブのリンク フェーズは、2 つのチャートを連続して表示する方法で、まったく別のページで終了します。jquery.flot は jquery による DOM 操作に依存しており、それが問題になる可能性があることを知っています (おそらく、それが私の問題の唯一の本当の説明です)。
それとも他の説明がありますか？$routeChangeStart をリッスンして $.plot プロセスを強制終了することで問題を実際に解決しましたが、その動作のヒント、提案、説明はありますか?
プランカー フロート チャート ディレクティブ DOM 衝突
同様の動作を示すプランカーを用意しました。ディレクティブの作成と、ディレクティブの非同期データおよびオプションの取得メソッドを遅らせて、アプリの動作を何らかの形で模倣しました。これは非生産コードですが、問題が発生する方法を簡略化して説明しています。メニュー項目を何度も「高速クリック」すると、Angular が 1 ページに 2 つのチャートを表示するように強制できる場合があります。実際には、1 つのディレクティブが別のパーシャルでリンクして何かを実行していますか? 私は私の心の中で何かが欠けていることを知っています...ヒントを教えてください。
エラーを再現するためにクロムを使用しました。プランカーを停止し、「実行」を押します。「実行」を押した直後に、両方のリンクを数回できる限り速くクリックします。
どうもありがとう！