当我的应用程序加载第一次它加载app.dit
页,但标签不显示活动一旦你开始点击标签后,它的工作,所以我想使第一个标签DIT
活跃时应用程序加载。
main.html
<uib-tabset active="active">
<uib-tab ng-repeat="tab in tabs" select="go(tab.route)" heading="{{tab.heading}}" active="tab.active" disable="tab.disabled">
<!--<div ui-view="">{{tab.route}}</div>-->
</uib-tab>
</uib-tabset>
ctrl.js
$scope.tabs = [{
heading: 'DIT',
route: 'app.dit',
active: true
}, {
heading: 'ST',
route: 'app.st',
active: false
}, {
heading: 'UAT',
route: 'app.uat',
active: false
}, ];
$scope.go = function(route) {
$state.go(route);
};
function active(route) {
return $state.is(route);
}
$scope.active = active;
$scope.$on("$stateChangeSuccess", function() {
$scope.tabs.forEach(function(tab) {
tab.active = active(tab.route);
});
});
app.js
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get('$state');
$state.go('app.dit');
});
$stateProvider
.state('app', {
abstract: true,
url: '',
templateUrl: 'web/global/main.html',
controller: 'MainCtrl'
})
.state('app.dit', {
url: '/dit',
templateUrl: 'view/partials/dit.html',
controller: 'DitCtrl'
})
.state('app.st', {
url: '/st',
templateUrl: 'view/partials/st.html',
controller: 'StCtrl'
})
.state('app.uat', {
url: '/uat',
templateUrl: 'view/partials/uat.html',
controller: 'UatCtrl'
})
.state('app.prod', {
url: '/prod',
templateUrl: 'view/partials/prod.html',
controller: 'ProdCtrl',
})
,
从文档来看,<uib-tabset active="active">
中绑定的active
变量必须是您想要显示为活动的选项卡的索引。
将控制器中的$scope.active
变量设置为0(或您希望的任何索引)应该会有所帮助。
此外,您可以根据当前的$state直接动态设置$scope.active
变量(而不是依赖于每个选项卡的active
bool并在$stateChangeSuccess
期间操作它,这可能会冒显示2+活动选项卡的风险)。
var returnActiveTabIndex = function() {
var current_route = $state.$current.name; //or however you want to find your current $state
var tab_routes = $scope.tabs.map(function(tab) { return tab.route });
var active_index = tab_routes.indexOf(current_route);
return (active_index > -1) ? active_index : 0;
};
$scope.active = returnActiveTabIndex();
额外的好处是在浏览器重新加载后,CTRL将读取您的当前状态(例如,"app.st"),并根据匹配的路由设置"app.st"选项卡为活动