如何更改uib-tabset中每个选项卡的路由

Question

当我选择一个选项卡时，我希望更改url。我应该为每个选项卡创建一个状态吗？

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

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 },
                ];

});

表集定义：

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

Answer 1

试试下面的代码：

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

Answer 2

如前所述，我建议查看我之前就这个主题发表的博客文章。

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

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

如果你不想跟随我博客的链接，下面是一个柱塞：

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

下面是基本配置：

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.");
}]);

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

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

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>

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

Answer 3

是的，您应该在选项卡中使用嵌套状态。如下所示：

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

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