1

我在我的 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' 的状态？

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

使用 $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 回答
0

那是因为您仅在单击时更改状态 (ui-sref="...")

因此，第一次选项卡处于活动状态但 ui-view 不会改变。

例如，一个快速的解决方案是 $state.go 在首次加载时转到活动选项卡。

于 2016-02-21T10:18:25.437 回答