如何改变路线uib-tabset每个选项卡的

When I choose a tab, I want the url to change. should I create a state for each tab ?

当我选择一个选项卡,我想要改变的url。我应该为每个选项卡创建一个国家吗?

This is my code which works fine without changing the state .

这是我的代码，在不改变状态的情况下运行良好。

My app.js

我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:

Tabset定义:

<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>

3 个解决方案

#1

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 !!

这里是这个代码的工作投入!!

#2

As mentioned above, I recommend checking out a blog post I made previously regarding this topic.

如上所述，我建议查看我之前关于这个主题的博客文章。

https://long2know.com/2016/01/angular-tabbed-navigation/

I detail managing state, intercepting state, preventing navigation (conditionally), etc. It's driven by services and promises that make creating navigation workflow easy and robust.

我详细描述了管理状态、拦截状态、防止导航(有条件地)等等。它是由服务和承诺驱动的，这使得创建导航工作流变得简单而健壮。

If you prefer to not follow the link to my blog, here's a plunker:

如果你不喜欢我的博客链接，这里有一个插销:

https://embed.plnkr.co/w5xdJP?autoCloseSidebar&show=preview

And here's the basic config:

这是基本配置:

myApp.config(['$uibModalProvider', '$locationProvider', '$stateProvider', '$urlRouterProvider',
    function ($uibModalProvider, $locationProvider, $stateProvider, $urlRouterProvider) {
        $uibModalProvider.options = { animation: true, backdrop: 'static', keyboard: false };
        $locationProvider.html5Mode(false);

        $urlRouterProvider
            .when('/', '/state1')
            .otherwise("/state1");

        $stateProvider
            .state('tabs', {
                abstract: true,
                url: '/',
                views: {
                    'tabs': {
                        controller: 'tabsCtrl as tc',
                        templateUrl: 'tabs.html',
                    }
                }
            })
            .state('tabs.state1', {
                url: 'state1',
                templateUrl: 'state1.html',
                controller: function () { },
                reloadOnSearch: false
            })
            .state('tabs.state2', {
                url: 'state2',
                templateUrl: 'state2.html',
                controller: function () { },
                reloadOnSearch: false
            })
            .state('tabs.state3', {
                url: 'state3',
                templateUrl: 'state3.html',
                controller: function () { },
                reloadOnSearch: false
            })
            .state('tabs.state4', {
                url: 'state4',
                templateUrl: 'state4.html',
                controller: function () { },
                reloadOnSearch: false
            })
    }]);

myApp.run(['$log', 'navigationService', function ($log, navigationService) {
    // Note, we need a reference to the navigationService so $state events are tracked.
    $log.log("Start.");
}]);

However, I usually create a service that contains a list of the states that I will bind to the tabs:

但是，我通常创建一个包含我将绑定到选项卡的状态列表的服务:

var appStates = function ($state) {
    var
        states = [
            { name: 'state1', heading: "Tab 1", route: "tabs.state1", active: false, isVisible: true, href: $state.href("tabs.state1") },
            { name: 'state2', heading: "Tab 2", route: "tabs.state2", active: false, isVisible: true, href: $state.href("tabs.state2") },
            { name: 'state3', heading: "Tab 3", route: "tabs.state3", active: false, isVisible: true, href: $state.href("tabs.state3") },
            { name: 'state4', heading: "Tab 4", route: "tabs.state4", active: false, isVisible: true, href: $state.href("tabs.state4") }
        ];

    return {
        states: states
    };
};

appStates.$inject = ['$state'];
angular.module('long2know.services')
    .factory('appStates', appStates);

The HTML looks like this:

HTML是这样的:

<script type="text/ng-template" id="tabs.html">
    <div class="row">
        <uib-tabset>
            <uib-tab ng-repeat="tab in tc.appStates" heading="{{tab.heading}}" active="tab.active" disable="tab.disabled"
                        select="tc.tabSelected(tab.route)">
            </uib-tab>
        </uib-tabset>
    </div>

    <div id="tabs-views" data-ui-view></div>
</script>

The tabController:

tabController:

   var tabsCtrl = function ($state, $location, $filter, appStates, navigationService) {
        var
            vm = this,            
            initialize = function () {
                vm.appStates = appStates.states;
            };
        vm.tabSelected = function (route) {
            $state.go(route);
        };
        initialize();
    };

    tabsCtrl.$inject = ['$state', '$location', '$filter', 'appStates', 'navigationService'];
    angular
        .module('long2know.controllers')
        .controller('tabsCtrl', tabsCtrl);

#3

Yes you should use nested states for your tabs. Something like below:

是的，您应该为选项卡使用嵌套状态。类似下图:

$stateProvider
  .state('main', {
    url: '/',
    templateUrl: 'main.html'
  })
  .state('main.ratios', {
    url: '/ratios',
    templateUrl: 'views/requetes.html'
  })

Here is a similar implementation with a navbar that you can use as an example.

这里有一个类似的实现，您可以使用一个导航条作为示例。

#1