angularjs - formularios - Recarga del estado actual-actualizar datos

ng src angular 6

Question

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

Tengo 3 niveles de estado: directory.organisations.details

directory.organisations contiene una tabla con una lista de organizaciones. Al hacer clic en un elemento de la tabla, se carga directory.organisations.details con $ StateParams pasando el ID del elemento. Entonces, en el estado de detalles, cargo los detalles para 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'');

El cual va al estado principal pero no vuelve a cargar el controlador, supongo que porque la ruta no ha cambiado. Idealmente, solo quiero permanecer en el estado directory.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 los controladores que están reinstalando en este momento, solucionando pronto)".

¿Cualquier ayuda sería apreciada?

Answer 1

Descubrí 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 nuevas versiones:

$state.reload();

Que 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

Answer 2

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, cuando necesites recargar, simplemente llama:

$state.forceReload();

Answer 3

Esta solución funciona en AngularJS V.1.2.2:

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

Answer 4

La respuesta de @Holland Risley ahora está disponible como una API en el último ui-router.

$state.reload();

Un método que obliga a recargar el estado actual. Todas las resoluciones se vuelven a resolver, los controladores se volvieron a establecer y los eventos se volvieron a activar.

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

Answer 5

No estoy seguro de por qué nada de esto parecía funcionar para mí; El que finalmente lo hizo fue:

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

Esto fue con Angular 1.4.0

Answer 6

Para v1.2.26 angular, ninguno de los trabajos anteriores. Para hacer que el estado se vuelva a cargar, se deberá hacer doble clic en un botón que llame a los métodos anteriores.

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

Answer 7

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.

Answer 8

Puede usar la respuesta de @Rohan https://.com/a/23609343/3297761

Pero si desea que cada controlador se vuelva a cargar después de un cambio de vista, puede usar

myApp.config(function($ionicConfigProvider) { $ionicConfigProvider.views.maxCache(0); ... }

Answer 9

Sé que ha habido un montón de respuestas pero la mejor manera 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 deseo actualizar y luego, cuando llamo a la ruta que paso en una Número aleatorio para el 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 a la perfección y maneja los resuelve.

Answer 10

Si desea volver a cargar toda la 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 (esto último, en caso de que necesite cambiar algunos parámetros en esta próxima recarga, algo como su número de página), entonces llame a este método del controlador:

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

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

Answer 11

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.

Trabajar para eso es un poco pirateado: tienes que configurar el caché en 0 en el archivo ionic.angular.js:

$ionicConfigProvider.views.maxCache(0);

Answer 12

Solución tonta que siempre funciona.

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

Answer 13

Tenía varias vistas anidadas y el objetivo era recargar solo una con contenido. Probé 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é aún funcionaría.

Answer 14

Todo fracasó para mí. Lo único que funcionó ... es agregar cache-view = "false" en la vista que deseo recargar cuando vaya a ella.

de este número https://github.com/angular-ui/ui-router/issues/582

Answer 15

Tuve este problema, estaba destrozando mi cabeza, mi ruta se lee desde un archivo JSON y luego se introduce en una directiva. Podría hacer clic en un estado de interfaz de usuario, pero no pude volver a cargar la página. Así que un colega mío me mostró un pequeño truco para eso.

1. Obtener sus datos
2. En tu configuración de aplicaciones crea un estado de carga.
3. Guarda el estado al que quieres ir en el rootscope.
4. Establezca su ubicación en "/ cargando" en su app.run
5. En el controlador de carga, resuelva la promesa de enrutamiento y, a continuación, establezca la ubicación en el destino deseado.

Esto funcionó para mí.

Espero eso ayude

Answer 16

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

Answer 17

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

Answer 18

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