如何更改 uib-tabset 中每个选项卡的路由 [英] how to change route for each tab in 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 中每个选项卡的路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！