4

次のように、Angular ページに 2 つの Bootstrap タブがあります。

<div>
    <ul class="nav nav-tabs">
        <li class="active strong">
            <a data-target="#home" data-toggle="tab">Tab 1</a>
        </li>
        <li class="strong">
            <a data-target="#pairs" data-toggle="tab">Tab 2</a>
        </li>
    </ul>
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="home">
            <div ng-include="partial_1.html"></div>
        </div>
        <div class="tab-pane fade" id="pairs">
            <div ng-include="partial_2.html"></div>
        </div>
    </div>
</div>

両方のパーシャルには、partial_X.html で定義された独自のコントローラーがあります。2 つのタブには独自のデータとビジネス ロジックがありますが、ユーザーが 2 番目のタブでサーバー上のデータを変更した場合は、最初のタブのコンテンツをサーバーから再読み込みする必要があります (または、少なくともユーザーが最初のタブに移動したとき)。

タブがクリックされても、コントローラーは既にインスタンス化されているため、もちろんリロードは行われません。コントローラーが再度初期化されるため、ページでブラウザーが更新された後にのみデータがリロードされます。

タブ 1 がクリックされたときにコントローラーをリロードする方法はありますか? 2 つのサブ コントローラーを 1 つに結合することもできますが、それは私の問題に対する汚い回避策のように思えます。

4

4 に答える 4

3

データを変更するコントローラーにイベントをブロードキャストさせ、更新が必要なコントローラーにそのイベントをリッスンさせます。イベントは次の場所で放送する必要があります$rootScope。

データを変更するコントローラー:

changeData().then(function() {
    $rootScope.$broadcast("importandDataChanged");
});

更新が必要なコントローラー:

$scope.$on("importandDataChanged", function() {
    // signal that data changed, lazy load when the tab is actually clicked
    $scope.importantData = null;
});

// let $scope.active be a flag that is true when the tab is active
$scope.$watch("active", function(newvval) {
    if( newval && $scope.importantData === null ) {
        loadData();
    }
});

アクティブ フラグの実装は、使用しているツールキットによって異なります (Bootstrap では、Angular UI Bootstrap を使用することをお勧めします)。

于 2013-10-29T06:49:44.673 に答える
0

ブートストラップ jquery プラグインからのイベントをリッスンするディレクティブを作成するか ( docsを参照)、それを実行するangular-strapなどの統合ライブラリを使用できます。次に、イベント (またはモデルへの変更) を監視し、サーバーからのデータでスコープを更新します。

于 2013-10-29T06:39:42.347 に答える
0

コントローラーをリロードするという観点ではなく、単にコントローラーのスコープ内のデータを更新することを考えてください。1 つのコントローラーが他のコントローラーと通信する方法は多数あります (つまり、イベントのブロードキャスト/発行、共有サービスの使用、または共通スコープの変更)。コントローラーが別のコントローラーのデータを更新する必要がある場合は、これらの使用可能なメソッドのいずれかを使用して、他のコントローラーに ajax 要求を実行し、そのスコープに新しい値を設定するように通知するだけです。

于 2013-10-29T06:46:45.817 に答える
0

data-tabname="tabName"タブ アンカーを追加しshown.bs.tab、タブが表示されたときにブートストラップによって発生するイベントをリッスンし、データ更新サービスを起動して更新します。

簡単な例:

$('a[data-toggle="tab"]').on('shown.bs.tab', this.showTabHandler.bind(this));

function showTabHandler(event) {
    switch (event.target.dataset.tabname) {
        case 'tab1':
            this.refreshTab1();
            break;

        case 'tab2':
            this.refreshTab2();
            break;

        default:
            console.log('Unknown tab switched.', event.target.dataset.tabname);
    }
}

実際のデモ リンク: https://codepen.io/arpi-t/pen/WBbQOQ

于 2019-05-06T12:21:05.023 に答える