Компонент angular ui bootstrap tabs: как получить содержимое вкладки, когда вкладка активна и не нажата

Question

Я использую компонент "tabs" загрузочного интерфейса в моем проекте angularjs. Он определяется в файле с именем 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