本文介绍了如何更改uib-tabset中每个选项卡的路由的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我选择一个标签时,我希望更改URL.我应该为每个选项卡创建一个状态吗?
When I choose a tab, I want the url to change. should I create a state for each tab ?
这是我的代码,可以在不更改状态的情况下正常工作.
This is my code which works fine without changing the state .
我的app.js
var myApp=angular.module('app', ['ui.router','ngAnimate', 'ui.bootstrap']);
myApp.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('/', {
url: "",
views: {
"ratios": { templateUrl: "views/requetes.html" },
"reqBase": {templateUrl: "views/common.html" },
"SQLconsole": {templateUrl: "views/console.html" },
}
});
$urlRouterProvider.otherwise('/');
}]);
myApp.controller('TabsCtrl', function ($rootScope, $state, $scope, $window) {
$scope.tabs = [
{ title: "ratios", route: "ratios", active: true },
{ title: "requetes de Base", route: "reqBase", active: false },
{ title: "Console", route: "SQLconsole", active: false },
];
});
标签定义:
<div data-ng-controller="TabsCtrl">
<uib-tabset>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
<div ui-view="{{tab.route}}"></div>
</uib-tab>
</uib-tabset>
</div>
推荐答案
尝试以下代码:
var myApp=angular.module('app', ['ui.router','ngAnimate', 'ui.bootstrap']);
myApp.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url:"/",
templateUrl: "views/requetes.html",
})
.state('home.ratios', {
url:"/ratios",
templateUrl: "views/requetes.html",
})
.state('home.reqBase', {
url:"/reqBase",
templateUrl: "views/common.html",
})
.state('home.SQLconsole', {
url:"/SQLconsole",
templateUrl: "views/console.html"
})
$urlRouterProvider.otherwise('/');
}]);
这是此代码的有效 PLUNKR !
这篇关于如何更改uib-tabset中每个选项卡的路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!