1

angularjs プロジェクトで ui ブートストラップ 'tabs' コンポーネントを使用しています。tab.htmlというファイルで定義されています。定義コードは次のとおりです。

<uib-tabset class="product-tab-bar">
    <uib-tab ng-repeat="tab in tabs" active="tab.active" ui-sref="{{tab.action}}" disable="tab.disabled" class="product-tab">
        <uib-tab-heading>
            <span class="{{tab.icon}}"></span> {{tab.title}}
        </uib-tab-heading>
        <div ui-view></div>
    </uib-tab>
</uib-tabset>

タブはコントローラーで定義されます。

.controller('myController', function () {

    $scope.tabs = [
        {title: "tab1", action:".tab1" , icon: "icon-tab1", active: false},
        {title: "tab2", action:".tab2" , icon: "icon-tab2", active: true},
        {title: "tab3", action:".tab3" , icon: "icon-tab3", active: false}
    ]
});

状態の定義は次のとおりです。

.state('tab', {
    url: '/tab',
    templateUrl: 'tab.html'
})
.state('tab.tab1', {
    url: '/tab1',
    templateUrl: 'tab1.html',
})
.state('tab.tab2', {
    url: '/tab2',
    templateUrl: 'tab2.html',
})
.state('tab.tab3', {
    url: '/tab3',
    templateUrl: 'tab3.html',
})

タブをクリックすると状態が変化します。私の質問は、最初にtab.htmlをロードすると、タブ 'tab2' がアクティブになりますが、tab2 のコンテンツがロードされないということです

あなたは以下のように見ることができます：

最初の読み込み tab2 コンテンツ

「tab2」をクリックする必要があり、状態が変更され、コンテンツがロードされます

あなたは以下のように見ることができます：

tab2コンテンツをクリックした後

最初にtab.htmlをロードするとき、「tab2」のコンテンツをロードする方法、または「tab2」の状態をアクティブにする方法はありますか?

4

3 に答える 3

1

実際に状態に移動する必要があります。

var activeTab;
for(var i = 0; i < $scope.tabs.length; i++) {
    if($scope.tabs[i].active) {
        activeTab = $scope.tabs[i];
        break;
    }
}

if(activeTab) {
    $state.go(activeTab.action);
}

JSFiddleはこちらから入手できます。

于 2016-02-21T10:22:01.150 に答える
0

これは、クリック (ui-sref="...") でのみ状態を変更するためです。

そのため、最初はタブがアクティブですが、UI ビューは変更されません。

たとえば、最初の読み込み時にアクティブなタブに $state.go するという簡単な解決策があります。

于 2016-02-21T10:18:25.437 に答える
0

$state.go('the-state-name-in-quotes') メソッドを使用して、適切な状態をトリガーし、コンテンツを読み込みます。このメソッドをコントローラーに追加します。

ドキュメントの下に詳細があります

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

于 2016-02-21T10:18:55.917 に答える