当我的应用程序加载第一次加载页面app.dit
,但一旦你开始点击它之后的作品的标签,所以我想使第一片DIT
主动当应用程序加载选项卡不显示活动。我如何用下面的代码实现这个任务?如何使用tabset在应用程序加载时使选项卡激活?
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',
})
;
我不明白为什么你需要''不惜一切时,你正在做的是将它们用于导航。使用tabs html和'ui-sref'和'ui-sref-active'作为链接会不会很简单? –
charlietfl
这是很难告诉你在做什么,你错了共享代码...你可以发布一个最小的小提琴手,plunkr或类似的东西? – raven
@charliefl这也是我的想法,但我的要求强制我使用uib-tabs。 – hussain