angularjs - stateprovider - Establezca los parámetros de consulta de URL sin cambio de estado utilizando el enrutador ui angular

ui router nested views

Question

¿Cómo debo actualizar la URL de la barra de direcciones con un parámetro de consulta cambiante usando el ui-router de AngularJS para mantener el estado al actualizar la página?

Actualmente, estoy usando $state.transitionTo(''search'', {q: ''updated search term''}) cada vez que cambia la entrada, pero el problema es que esto recarga el controlador, vuelve a dibujar la ventana y pierde cualquier foco de entrada de texto.

¿Hay alguna manera de actualizar stateParams y sincronizarlo con la URL de la ventana?

Answer 1

Estaba teniendo problemas con .transitionTo hasta que actualicé a ui-router 0.2.14. 0.2.14 cambia correctamente la barra de ubicación (sin volver a cargar el controlador) usando una llamada como esta:

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

Answer 2

edit: Hoy hemos jugado un poco más con esto y nos hemos dado cuenta de que ui-router angular tiene una opción similar a la del routerProvider nativo: "reloadOnSearch".

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

Se establece en true de manera predeterminada, pero si lo configura en false en su estado, entonces el cambio de estado no ocurrirá cuando se cambien los parámetros de la consulta. A continuación, puede llamar a $location.search(params); o $location.search(''param'', value); y la URL cambiará, pero ui-router no reconstruirá todo el controlador / vista. Probablemente también necesite escuchar el evento $locationChangeStart en el ámbito raíz para gestionar las acciones de historial de retroceso y avance de su aplicación, ya que tampoco provocarán cambios de estado.

También estoy escuchando el evento $stateChangeSuccess en el alcance de mi controlador para capturar la carga inicial de la página / ruta.

Hay una discusión sobre github para usar esta función con cambios de ruta (no solo cambios de URL): https://github.com/angular-ui/ui-router/issues/125 pero no lo he probado en absoluto desde que mi el caso de uso fue específico para los parámetros de cadena de consulta.

La versión anterior de mi respuesta menciona este problema github:

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

Pero ese es un problema ligeramente diferente, que muestra específicamente un modal de un estado sobre otro sin cambiar el estado no modal. Probé el parche en ese tema, pero está claro que no está destinado a evitar que todo el estado se vuelva a cargar en el cambio de URL.

Answer 3

Actualización 19 de mayo de 2015

A partir de ui-router 0.2.15, se ha resuelto el problema de volver a cargar el estado en los cambios del parámetro de consulta. Sin embargo, la nueva actualización rompió las capacidades de avance y retroceso de la API de historial con parámetros de consulta. No he podido encontrar una solución para eso.

Original

La respuesta de Jay no funcionó para mí, y tampoco una tonelada de otras respuestas. Intentar escuchar $locationChangeStart causó problemas al tratar de ir y venir en el historial del navegador, ya que me haría ejecutar el código dos veces: una vez cuando el nuevo estado cambió y otra porque se $loationChangeStart .

Intenté usar reloadOnSearch=false , pero eso evitó cambios de estado incluso cuando cambió la ruta de la url. Así que finalmente lo hice funcionar al hacer lo siguiente:

Cuando cambie $location.search() para actualizar los parámetros de la consulta, use un "hack" para deshabilitar temporalmente la recarga en la búsqueda, establezca los parámetros de consulta, luego vuelva a habilitar la recarga.

$state.current.reloadOnSearch = false;

$location.search(''query'', [1,2]);

$timeout(function () {
  $state.current.reloadOnSearch = undefined;
});

Esto asegurará que los cambios en los parámetros de consulta no vuelvan a cargar el estado y que los cambios en la ruta de la url recarguen el estado correctamente.

Sin embargo, esto no permitió que el historial de los navegadores cambiara el estado (necesario para saber cuándo un parámetro de consulta cambia para volver a leer la URL) cuando un parámetro de consulta formaba parte de la url. Así que también tuve que agregar el nombre de cada parámetro de consulta a la propiedad url del state .

$locationProvider.html5Mode(true);

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

Cualquier nombre de parámetro en la url es opcional cuando se enumera de esta manera, pero cualquier cambio en esos nombres de parámetros volverá a cargar el estado al presionar los botones para retroceder y avanzar en el navegador.

Afortunadamente, a otros les resulta útil y no les lleva varios días descubrir cómo hacerlo (como yo hice).