AngularJS - Conserver les valeurs en changeant l'url

celionor
Javascript

Bonjour,

Imaginez un système de tabulation des plus classique, avec une page (ex: /#/page)
dans le controller :
this.tab = 1;
dans la vue :
<li ng-class="{ 'active': ctrl.tab == 1 }"> <a href ng-click="ctrl.tab = 1">onglet 1</a> </li> <li ng-class="{ 'active': ctrl.tab == 2 }"> <a href ng-click="ctrl.tab = 2">onglet 2</a> </li>

Une fois que l'on a cliqué sur une tab, ça affiche le bloc correspondant. Dedans, on a du texte, et des liens qui ouvrent une modal en modifiant l'url (ex: /#/page/action).

Le petit soucis, c'est quand l'url change, la valeur this.tab se réinitialise, pourtant, je suis toujours sur la même page.

Est-ce qu'il y aurait une méthode pour conserver cette valeur ?

Merci.

5 réponses

Georges Marcus Durand

Je suis débutant avec AngularJS, donc prend ce que je dis avec des pincettes.

Tu peux normalement "stocker" des données dans un service puis ensuite les récupérées juste après avoir cliqué.
Est-ce que tu utilisees $anchor pour tes tabs ? Peut être qu'il le faut.

Amilor7

Salut,
Pour t'aider : lien, regarde la vidéo nommée Tabs Inside Out dans la section 2- Built-in Directives. (Il te faudra un compte, mais c'est gratuit)
D'ailleurs je te recommande cette "formation" qui est plutôt bien faite ;)

celionor
Auteur

@Amilor7 : Je connais leurs formations, très interressantes.
Cependant, créer un système de tabulation, et vérifier si la tab est active ou pas, aucun problème.
Mais le problème vient du fait que lorsque que je change l'url, la valeur ne se conserve pas, suremennt du fait que je rappelle ce même controller.

@Georges Marcus Durand : je vais regarder comment sauvegarder une valeur dans un service d'un controller à un autre par ex.

Merci

Defy

tu peut utiliser ui-router c'est plus simple pour faire des tabs, et d'une tabs a l'autre les elements d'un formulaire sont gardé

celionor
Auteur

Hello,

@Defy: d'une tab à une autre, les éléments se conservent bien, le problème n'est pas là.
C'est surtout qu'une url à une autre, la tab active ne l'est plus, pourtant dans un même controller.

Je confirme que la méthode de @Georges Marcus Durand en passant par un service fonctionne.
1/ dans le service :
.factory('Tab'); var active = false;

2/ dans le controller :
.controller('ctrl'); if(Tab.active) this.tab = Tab.active this.activeTab = function(tab) { Tab.active = this.tab = tab; };

3/ dans la vue :
<a href ng-class="{ 'active': ctrl.tab == 2 }" ng-click="ctrl.activeTab('2')">onglet 2</a>

C'est une bonne méthode d'après vous ?