我在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',状态将被更改,内容将被加载
你可以看到如下:
当我第一次加载 tab.html 时,是否有任何方法,可以加载'tab2'的内容或如何激活'tab2'的状态?
答案 0 :(得分: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可用here。
答案 1 :(得分:0)
那是因为你只在点击时更改状态 (UI-SREF =&#34; ...&#34)
因此,第一次选项卡处于活动状态但ui-view不会发生变化。
例如,一个快速解决方案是在首次加载时将$ state.go添加到活动选项卡。
答案 2 :(得分:0)
使用$ state.go(&#39; the-state-name-in-quotes&#39;)方法来触发适当的状态和加载内容。在控制器中添加此方法。
以下文档中有更多详细信息
https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options