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