8

現在、Twitter Bootstrap を使用して AngularJS プロジェクトに取り組んでおり、Bootstrap ディレクティブを Angular に移行しようとしています。Bootstrap-Select のサポートを提供する AngularStrap を選択することにしました (AngularUI でも同じかどうかはわかりませんでした)。ただし、タブの例は静的な html のみをカバーしていました。タブがクリックされたときにのみ呼び出されるように、AngularStrap または AngularJS を介して HTML フラグメントを動的にロードする方法はありますか? 私のhtmlフラグメントもjavascriptを実行する必要があります。

そうする理由は 2 つあります。まず、各タブには非常に多くのコンテンツが含まれており、一度にすべてのタブをロードしたくないため、ロードが遅くなります。2 番目の理由は、ソース コードに対してよりモジュール化されたアプローチを好み、すべてを同じ html ファイルに配置しないことです。

4

1 に答える 1

10

ng-includeディレクティブを使用して、html フラグメントをロードできます。

AngularStrap タブの例を使用すると、静的コンテンツを URL で切り替えて、html フラグメントを取得できます。以下は、これらの重要な変更を加えた AngularStrap タブの例に基づく例です。

1) template1.html、template2.html、または template3.html のいずれかを指すコンテンツの代わりにプロパティが追加されました$scope.tabs。page

    $scope.tabs = [
    {title:'Home', page: 'template1.html'},
    {title:'Profile', page: 'template2.html'},
    {title:'About', page: 'template3.html'}
  ];

2)ng-include現在選択されているタブのページを表示する が追加されました。

  <div ng-include src="tabs[tabs.activeTab].page"></div>

注: のng-include外側を持っているng-repeatので、各タブのページ コンテンツは読み込まれません (表示されていなくても)。

于 2013-06-04T05:00:48.583 に答える