¿Cómo recargar el estado actual?


333

Estoy usando Angular UI Router y me gustaría volver a cargar el estado actual y actualizar todos los datos / volver a ejecutar los controladores para el estado actual y su padre.

Tengo 3 niveles de estado: directorio.organizaciones.detalles

directory.organisations contiene una tabla con una lista de organizaciones. Al hacer clic en un elemento de la tabla, se cargan los directorios.organisations.details con $ StateParams que pasa la ID del elemento. Entonces, en el estado de detalles, cargo los detalles de este elemento, los edito y luego guardo los datos. Todo bien hasta ahora.

Ahora necesito volver a cargar este estado y actualizar todos los datos.

Yo he tratado:

 $state.transitionTo('directory.organisations');

Supongo que el estado pasa al estado principal pero no recarga el controlador porque la ruta no ha cambiado. Idealmente, solo quiero permanecer en el estado del directorio.organisations.details y actualizar todos los datos en el padre también.

También he intentado:

$state.reload()

He visto esto en la API WIKI para $ state.reload "(error con la reinstalación de los controladores en este momento, corrección pronto)".

¿Cualquier ayuda sería apreciada?


77
He resuelto esto de la siguiente manera: $ state.transitionTo ($ state.current, $ stateParams, {reload: true, herencia: false, notifique: true});
Holland Risley

1
¿Dónde agregar este código?
Manoj G

Entonces, ¿el error está solucionado ahora? github.com/angular-ui/ui-router/wiki/…
jchnxu

¿Dónde se debe $state.transitionTo($state.current, $stateParams, {reload:true, inherit:false})agregar el código ? Tener este mismo problema con la recarga de mis estados es perder todos los datos.
Evan Burbidge

Respuestas:


565

Encontré que esta es la forma de trabajo más corta para actualizar con ui-router:

$state.go($state.current, {}, {reload: true}); //second parameter is for $stateParams

Actualización para versiones más nuevas:

$state.reload();

Cuál es un alias para:

$state.transitionTo($state.current, $stateParams, { 
  reload: true, inherit: false, notify: true
});

Documentación: https://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state#methods_reload


21
Probablemente valga la pena señalar que ninguno de estos realmente vuelve a cargar la página también. Si desea volver a cargar el estado Y la página, no hay ningún ui-routermétodo para ello, creo. Hacer window.location.reload(true).
SimplGy

15
@SimpleAsCouldBe si quisieras ser más angular al respecto, podrías hacerlo $window.location.reload();. Aunque esto parece un poco exagerado, podría hacer que probar / burlarse / conocer todas las dependencias de una pieza de código haga las cosas un poco más fáciles.
bordes el

1
Por curiosidad, ¿qué significa exactamente "$ state.current"? No puedo ver explicaciones claras sobre la API de ui-router, cualquier ayuda será apreciada, ¡gracias!
user2499325

3
@ user2499325: $ state.current devuelve un objeto con todos los datos que tiene en su estadoProveedor: `` `{url:" / place /: placeId ", controller:" NewPlaceController ", controllerAs:" placeVM ", templateUrl:" places /new.place/new.place.details.html ", nombre:" index.places.placeDetails "}` ``
Xavier Haniquaut

1
Puede reemplazar {} con $ stateParams si ya tiene parámetros cargados como tales: $ state.go ($ state.current, $ stateParams, {reload: true});
tsuz

154

Esta solución funciona en AngularJS V.1.2.2:

$state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
});

8
¿Dónde agregarías esto para que no cause un bucle infinito?
Pathsofdesign

55
¿Esto volverá a resolver los resolveelementos del estado?
TheSharpieOne

77
Además, no tendrá que inyectar $ stateParams si cambia esa llamada a $ state.params
Jeff Ancel

44
Funciona mucho mejor que la respuesta actual más votada, en realidad recarga la página. Si tiene el problema del bucle infinito, su recarga probablemente esté en el lugar equivocado. Solo lo estoy usando al hacer clic en un botón
Dan

2
Un poco tarde para @ManojG, pero pondría este código en cualquier lugar donde necesite forzar una recarga, tal vez en una función de directiva ng-click u otro evento. No debe hacerse en cada carga de página por razones obvias (bucle infinito)
sricks

68

Esa sería la solución final. (inspirado en la publicación de @ Hollan_Risley)

'use strict';

angular.module('app')

.config(function($provide) {
    $provide.decorator('$state', function($delegate, $stateParams) {
        $delegate.forceReload = function() {
            return $delegate.go($delegate.current, $stateParams, {
                reload: true,
                inherit: false,
                notify: true
            });
        };
        return $delegate;
    });
});

Ahora, cada vez que necesite recargar, simplemente llame:

$state.forceReload();

66
bucle infinito de la muerte
CS

66
Parece que tienes un interceptor en algún lugar que se dispara. He probado esta solución varias veces y funciona bien.
MK

2
@MK Gracias por esa nota. Me condujo hacia la solución de mi propio problema diferente. Pasé horas tratando de averiguar por qué mis solicitudes se duplicaron, luego se triplicaron, etc. y todo fue debido a un interceptor ( github.com/witoldsz/angular-http-auth ).
Maciej Gurban

57

para marco iónico

$state.transitionTo($state.current, $state.$current.params, { reload: true, inherit: true, notify: true });//reload

$stateProvider.
  state('home', {
    url: '/',
    cache: false, //required

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


Funciona bien para mí donde $state.gono se pudo redirigir a un estado nuevo. Gracias @RouR. Me salvó el día
Guillaume Wuip

Creo que reemplazar $ state.go con $ state.transitionTo. Entonces, donde sea que llame a $ state.go, simplemente reemplácelo. Podría ser algo así como $ state.transitionTo ('tab-name', {key: value}, {reload: true, hereit: true, notify: true}
Bill Pope

2
caché: falso hace el truco ... pero ¿cuánto afecta el rendimiento?
FrEaKmAn

change $ state.go with $ state.transitionTo para cambiar el estado y recargar @ManojG
Gery

¿Tengo que incluir alguna biblioteca nueva para usar $state? Estoy ejecutando iónico 1.4.0, angular 1.5.3
josinalvo

45

Probablemente el enfoque más limpio sería el siguiente:

<a data-ui-sref="directory.organisations.details" data-ui-sref-opts="{reload: true}">Details State</a>

Podemos recargar el estado solo desde el HTML.


77
También puede usar ui-sref-opts = "{reload: 'child.state'}" para evitar volver a cargar toda la página, donde 'child.state' es una cadena que representa su estado real.
Michael Fulton



13
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };

7

si quiere volver a cargar toda su página, como parece, simplemente inyecte $ window en su controlador y luego llame

$window.location.href = '/';

pero si solo desea volver a cargar su vista actual, inyecte $ scope, $ state y $ stateParams (este último en caso de que necesite cambiar algunos parámetros en esta próxima recarga, algo así como su número de página), entonces llame a esto dentro de cualquier método de controlador:

$stateParams.page = 1;
$state.reload();

AngularJS v1.3.15 angular-ui-router v0.2.15


6

Solución tonta que siempre funciona.

$state.go("otherState").then(function(){
     $state.go("wantedState")
});

3

Para angular v1.2.26, ninguno de los anteriores funciona. Se deberá hacer clic dos veces en un ng-click que llame a los métodos anteriores para que el estado se vuelva a cargar.

Así que terminé emulando 2 clics usando $ timeout.

$provide.decorator('$state',
        ["$delegate", "$stateParams", '$timeout', function ($delegate, $stateParams, $timeout) {
            $delegate.forceReload = function () {
                var reload = function () {
                    $delegate.transitionTo($delegate.current, angular.copy($stateParams), {
                        reload: true,
                        inherit: true,
                        notify: true
                    })
                };
                reload();
                $timeout(reload, 100);
            };
            return $delegate;
        }]);

Navigation.reload () requirió dos clics con Angular 1.3.0-rc0, pero la transición a () funcionó bien. Tal vez intente actualizar si tiene este problema
sricks el


3

No estoy seguro de por qué ninguno de estos parecía funcionar para mí; el que finalmente lo hizo fue:

$state.reload($state.current.name);

Esto fue con Angular 1.4.0


2

Tenía varias vistas anidadas y el objetivo era volver a cargar solo una con contenido. Intenté diferentes enfoques, pero lo único que funcionó para mí es:

//to reload
$stateParams.reload = !$stateParams.reload; //flip value of reload param
$state.go($state.current, $stateParams);

//state config
$stateProvider
  .state('app.dashboard', {
    url: '/',
    templateUrl: 'app/components/dashboard/dashboard.tmpl.html',
    controller: 'DashboardController',
    controllerAs: 'vm',
    params: {reload: false} //add reload param to a view you want to reload
  });

En este caso, solo se volvería a cargar la vista necesaria y el almacenamiento en caché seguiría funcionando.


recarga verdadero o falso, mencionaste como falso. falso recargará el contenido con los últimos cambios?
muerto el

2

Sé que ha habido un montón de respuestas, pero la mejor forma en que he encontrado para hacer esto sin causar una actualización completa de la página es crear un parámetro ficticio en la ruta que quiero actualizar y luego, cuando llamo a la ruta, paso un número aleatorio al parámetro ficticio.

            .state("coverage.check.response", {
                params: { coverageResponse: null, coverageResponseId: 0, updater: 1 },
                views: {
                    "coverageResponse": {
                        templateUrl: "/Scripts/app/coverage/templates/coverageResponse.html",
                        controller: "coverageResponseController",
                        controllerAs: "vm"
                    }
                }
            })

y luego la llamada a esa ruta

$state.go("coverage.check.response", { coverageResponse: coverage, updater: Math.floor(Math.random() * 100000) + 1 });

Funciona como un encanto y maneja los resuelve.



2

Si está utilizando ionic v1, la solución anterior no funcionará ya que ionic ha habilitado el almacenamiento en caché de plantillas como parte de $ ionicConfigProvider.

Evitar eso es un poco hacky: debe establecer el caché en 0 en el archivo ionic.angular.js:

$ionicConfigProvider.views.maxCache(0);

1

Tuve este problema: me estaba destrozando la cabeza, mi ruta se lee desde un archivo JSON y luego se alimenta a una directiva. Podía hacer clic en un estado ui pero no podía volver a cargar la página. Así que un colega mío me mostró un pequeño truco para ello.

  1. Obtenga sus datos
  2. En la configuración de sus aplicaciones, cree un estado de carga
  3. Guarde el estado al que desea ir en el rootcope.
  4. Establezca su ubicación en "/ cargando" en su aplicación.
  5. En el controlador de carga, resuelva la promesa de enrutamiento y luego configure la ubicación para el objetivo deseado.

Esto funcionó para mí.

Espero eso ayude

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.