marwa marwa - 2 months ago 44
AngularJS Question

how to change route for each tab in uib-tabset

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>

Answer

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