comment faire pour modifier l'itinéraire de chaque onglet dans uib-tabset

Lorsque je choisis un onglet, je veux que l'url de changer. dois-je créer un état pour chaque onglet ?

C'est mon code qui fonctionne très bien sans changer l'état .

Mon 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 définition:

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

Il y aura une racine à l'état où vous pourrez afficher des onglets à l'intérieur de l'onglet de contenu, vous aurez une autre ui-view qui va charger le contenu de l'onglet en fonction de l'état , fondamentalement, chaque onglet, avoir son propre état.wgich sera l'enfant de la racine de l'état
Les réponses données n'utilisez pas uib-tabset! Vous dites que vous avez résolu le problème, mais vous ne donnez pas votre solution. Je pense que je vais essayer de long2know.com/2016/01/angular-tabbed-navigation à la place.

OriginalL'auteur Yuri | 2016-01-22

Essayez ce 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('/');
          }]);

Ici est le travail PLUNKR pour ce code !!

je vous remercie beaucoup . J'ai utilisé votre solution avec quelques modifications, et ça fonctionne 🙂
Pas uib-onglets là... 🙁

OriginalL'auteur techyaura

Comme mentionné ci-dessus, je vous recommandons de vérifier un billet de blog que j'ai faite précédemment à ce sujet.

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

J'détail, la gestion de l'état, de l'interception de l'état, de la prévention de la navigation (sous certaines conditions), etc. Il est piloté par les services et les promesses, la création de navigation de flux de travail simple et robuste.

Si vous préférez ne pas suivre le lien vers mon blog, voici un plunker:

https://embed.plnkr.co/w5xdJP?autoCloseSidebar&show=aperçu

Et voici la config de base:

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

Cependant, j'ai l'habitude de créer un service qui contient une liste des membres que je vais lier les onglets:

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

Le code HTML ressemble à ceci:

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

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

OriginalL'auteur long2know

0

Oui, vous devriez utiliser imbriqués les états de vos onglets. Quelque chose comme ci-dessous:
```
$stateProvider
.state('main', {
url: '/',
templateUrl: 'main.html'
})
.state('main.ratios', {
url: '/ratios',
templateUrl: 'views/requetes.html'
})
```
Ici est une implémentation similaire avec une barre de navigation que vous pouvez utiliser comme un exemple.

Vous n'êtes même pas à l'aide de l'udb-onglets ici ....

OriginalL'auteur Brian Baker

Vous devez vous connecter pour publier un commentaire.