angular ui bootstrap選項卡組件：未單擊選項卡處於活動狀態時如何獲取選項卡內容

Question

我在我的angularjs項目中使用ui bootstrap'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'狀態？

Answer 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 在這里可用。

Answer 2

那是因為您只能在單擊時更改狀態（ui-sref =“ ...”）

因此，在第一次選項卡處於活動狀態，但用戶界面視圖不變。

例如，一種快速解決方案是在第一次加載時將$ state.go轉到活動選項卡。

Answer 3

使用$ state.go（'-the-state-name-in-quotes'）方法觸發適當的狀態並加載內容。 在您的控制器中添加此方法。

以下文檔具有更多詳細信息

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