本文介绍了如何更改 uib-tabset 中每个选项卡的路由的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我选择一个选项卡时,我希望更改 url.我应该为每个选项卡创建一个状态吗?
这是我的代码,无需更改状态即可正常工作.
我的 app.js
var myApp=angular.module('app', ['ui.router','ngAnimate', 'ui.bootstrap']);myApp.config(['$stateProvider','$urlRouterProvider',函数($stateProvider,$urlRouterProvider){$stateProvider.state('/', {网址:"",意见:{"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 },];});
标签集定义:
<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>
解决方案
试试这个代码:
var myApp=angular.module('app', ['ui.router','ngAnimate', 'ui.bootstrap']);myApp.config(['$stateProvider','$urlRouterProvider',函数($stateProvider,$urlRouterProvider){$stateProvider.state('家', {网址:"/",templateUrl: "views/requetes.html",}).state('home.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!!
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 .
My 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 },
];
});
Tabset definition:
<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>
解决方案
Try this code :
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('/');
}]);
Here is the working PLUNKR for this code !!
这篇关于如何更改 uib-tabset 中每个选项卡的路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!