Définir les parameters de requête d’URL sans modification d’état à l’aide du routeur ui angular

Comment dois-je mettre à jour l’URL de la barre d’adresse avec un paramètre de requête changeant à l’aide du routeur ui de AngularJS pour conserver l’état lors de l’actualisation de la page?

Actuellement, j’utilise $state.transitionTo('search', {q: 'updated search term'}) chaque fois que les entrées changent, mais le problème est que cela recharge le contrôleur, redessine la fenêtre et perd tout focus de saisie.

Est-il possible de mettre à jour stateParams et de le synchroniser avec l’URL de la fenêtre?

J’avais des problèmes avec .transitionT jusqu’à ce que je mette à jour à ui-router 0.2.14. 0.2.14 modifie correctement la barre d’emplacement (sans recharger le contrôleur) en utilisant un appel comme celui-ci:

 $state.transitionTo('search', {q: 'updated search term'}, { notify: false }); 

edit: Joué avec ceci aujourd’hui encore, et réalisé que le routeur ui a une option similaire à celle du routeurProvider natif: “reloadOnSearch”.

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#options-1

Il est défini sur true par défaut, mais si vous le définissez sur false dans votre état, le changement d’état ne se produit pas lorsque les parameters de la requête sont modifiés. Vous pouvez ensuite appeler $location.search(params); ou $location.search('param', value); et l’URL changera, mais ui-router ne reconstruira pas l’intégralité du contrôleur / de la vue. Vous devrez probablement également écouter l’événement $locationChangeStart sur l’étendue racine pour gérer les actions d’historique de l’historique des transactions dans votre application, car celles-ci ne provoqueront pas non plus de modifications d’état.

J’écoute également l’événement $stateChangeSuccess sur la scope de mon contrôleur pour capturer le chargement initial de la page / route.

Il y a une discussion sur github pour utiliser cette fonctionnalité avec les changements de chemin (pas seulement les changements d’URL): https://github.com/angular-ui/ui-router/issues/125 mais je n’ai pas du tout testé depuis mon cas d’utilisation était spécifique aux parameters de requête de chaîne.

La version précédente de ma réponse mentionnait ce problème de github:

https://github.com/angular-ui/ui-router/issues/562

Mais c’est un problème légèrement distinct, qui montre spécifiquement un modal d’un état sur un autre état sans que l’état non modal change. J’ai essayé le correctif dans ce problème, mais il est clair qu’il n’est pas destiné à empêcher tout l’état de se recharger lors d’un changement d’URL.

Mise à jour du 19 mai 2015

À partir de l’interface utilisateur du routeur 0.2.15, le problème du rechargement de l’état des modifications des parameters de requête a été résolu. Cependant, la nouvelle mise à jour a brisé les capacités de retour et d’avance de l’API avec les parameters de requête. Je n’ai pas été capable de trouver une solution pour cela.

Original

La réponse de Jay n’a pas fonctionné pour moi, pas plus que d’autres réponses. Essayer d’écouter $locationChangeStart causé des problèmes en essayant de faire des allers-retours dans l’historique du navigateur car cela $loationChangeStart à exécuter du code deux fois: une fois lorsque le nouvel état a changé et un autre parce que $loationChangeStart déclenché.

J’ai essayé d’utiliser reloadOnSearch=false , mais cela empêchait les changements d’état même lorsque le chemin de l’URL changeait. Donc, j’ai finalement réussi à le faire en procédant comme suit:

Lorsque vous modifiez $location.search() pour mettre à jour les parameters de la requête, utilisez un “hack” pour désactiver temporairement le rechargement lors de la recherche, définir les parameters de la requête, puis réactiver le rechargement.

 $state.current.reloadOnSearch = false; $location.search('query', [1,2]); $timeout(function () { $state.current.reloadOnSearch = undefined; }); 

Cela garantira que les modifications des parameters de requête ne rechargent pas l’état et que les modifications du chemin de l’URL rechargeront correctement l’état.

Cependant, cela n’a pas permis à l’historique du navigateur de modifier l’état (nécessaire pour savoir quand un paramètre de requête change pour relire l’URL) lorsqu’un paramètre de requête faisait partie de l’URL. J’ai donc également dû append le nom de chaque paramètre de requête à la propriété url de l’ état .

 $locationProvider.html5Mode(true); $stateProvider .state('home', { url: '/?param1&param2&param3', templateUrl: 'home.html', controller: 'homeCtrl as home', }); 

Tous les noms de parameters sur l’URL sont facultatifs lorsqu’ils sont listés de cette manière, mais toute modification de ces noms de parameters rechargera l’état lorsque vous appuierez sur les boutons Précédent et Suivant du navigateur.

J’espère que d’autres trouveront cela utile et qu’il ne leur faudra pas plusieurs jours pour comprendre comment le faire (comme je l’ai fait).