1

Bootstrap Collapseコンポーネントを使用して一連のパネルをレンダリングするアプリケーションを構築しています。最初はすべてのパネルが折りたたまれた状態になっています。

ページにはこのようなパネルが多数含まれており、それぞれに大量のコンテンツが含まれている可能性があるため、ユーザーがパネルを展開したときに AJAX 呼び出しを実行して、これらのパネルをオンデマンドで表示することが適切であると思われます。

ページの動的コンテンツ (パネルのマークアップを含む) は AngularJS を使用してレンダリングされます。パネル要素のイベントにバインドするように Angular を構成できると思います。これにより、展開時にコンテンツが遅延ロードされます。

残念ながら、AngularJS のドキュメントと利用可能なチュートリアルを見ても、これに取り組む最善の方法がわかりません。誰かがそれに光を当てることができますか？

前もって感謝します、

ティム

4

2 に答える 2

3

これはかなり古いですが、この質問は今でも時々出てくるかもしれません。コントローラーを汚染することなく、これが最も適切なソリューションであることがわかりました: (myDirective作成直後に AJAX を介してコンテンツをロードします。)

<accordion>
  <accordion-group 
    heading=""
    ng-repeat="foo in bar"
    ng-init="status = {load: false}"
    ng-click="status.load = true">

  <myDirective ng-if="status.load"></myDirective>
  </accordion-group>
</accordion>

によって作成された各要素ng-repeatは独自の $scope を取得するため、ab accordion-group をクリックすると、それぞれのディレクティブのみが読み込まれます。

編集:遅延と遅延ロードされるデータのサイズに応じて、ng-mouseover代わりにng-click. こうすることで、ユーザーがアコーディオンを開く 100 ミリ秒前に読み込みが開始され、UI の「動きの鈍さ」を軽減できます。明らかに、実際にはクリックされないグループのコンテンツを時折ロードするという欠点があります。

于 2015-09-03T15:01:49.710 に答える