web-dev-qa-db-fra.com

Rechargement de l'état actuel - actualiser les données

J'utilise Angular UI Router et je voudrais recharger l'état actuel et actualiser toutes les données/réexécuter les contrôleurs pour l'état actuel et son parent.

J'ai 3 niveaux d'état: directory.organisations.details

directory.organisations contient un tableau avec une liste d'organisations. Cliquer sur un élément de la table charge directory.organisations.details avec $ StateParams en transmettant l'ID de l'élément. Donc, dans l'état de détails, je charge les détails de cet élément, les édite, puis enregistre les données. Tout va bien jusqu'à présent.

Maintenant, je dois recharger cet état et actualiser toutes les données.

J'ai essayé:

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

Ce qui va à l'état parent mais ne recharge pas le contrôleur, je suppose parce que le chemin n'a pas changé. Idéalement, je souhaite simplement rester dans l'état directory.organisations.details et actualiser toutes les données du parent.

J'ai aussi essayé:

$state.reload()

J'ai vu cela sur l'API WIKI pour $ state.reload "(bug avec les contrôleurs remontant à l'heure actuelle, en train de se réparer bientôt)."

Toute aide serait appréciée?

angularjsangular-uiangular-ui-router
321
Holland Risley

Cette solution fonctionne dans AngularJS V.1.2.2:

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

J'ai trouvé que c'était le moyen le plus rapide d'actualiser avec ui-router:

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

Mettre à jour pour les versions les plus récentes:

$state.reload();

Qui est un alias pour:

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

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

546
Rohan

Ce serait la solution finale. (inspiré par le post 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;
    });
});

Maintenant, chaque fois que vous avez besoin de recharger, appelez simplement:

$state.forceReload();
67
M K

pour ionic framework

$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

56
RouR

L'approche plus propre serait probablement la suivante:

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

Nous pouvons recharger l'état à partir du HTML uniquement.

44
Vaibhav Pachauri

La réponse de @Holland Risley est maintenant disponible en tant qu'API dans le dernier routeur ui.

$state.reload();

Une méthode qui force recharge l'état actuel. Toutes les résolutions sont re-résolues, les contrôleurs réinitialisés et les événements rediffusés.

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

19
Muthukannan Kanniappan
$state.go($state.current, $stateParams, {reload: true, inherit: false});
15
Weston Ganger
$scope.reloadstat = function () { $state.go($state.current, {}, {reload: true}); };
9
user7961355

si vous voulez recharger toute votre page, comme cela semble être le cas, injectez simplement $ window dans votre contrôleur puis appelez

$window.location.href = '/';

mais si vous voulez seulement recharger votre vue actuelle, injectez $ scope, $ state et $ stateParams (ce dernier au cas où vous auriez besoin de modifier certains paramètres lors de ce prochain rechargement, comme votre numéro de page), puis appelez-le dans n'importe quel type. méthode du contrôleur:

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

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

6
MarcoSantana

Contournement idiot qui fonctionne toujours.

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

Tout a échoué pour moi. La seule chose qui a fonctionné ... est d'ajouter cache-view = "false" dans la vue que je veux recharger lorsque je vais y accéder.

à partir de ce numéro https://github.com/angular-ui/ui-router/issues/582

2
Hans

Je ne sais pas pourquoi aucune de ces solutions ne semble fonctionner pour moi. celui qui l'a finalement fait:

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

C'était avec Angular 1.4.0

2
BarrySW19

Pour angular v1.2.26, aucune des solutions ci-dessus ne fonctionne. Un ng-click appelant les méthodes ci-dessus devra être cliqué deux fois pour rendre l'état rechargé.

J'ai donc fini par émuler 2 clics en utilisant $ 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;
        }]);
2
thanos panousis

Vous pouvez utiliser la réponse @Rohan https://stackoverflow.com/a/23609343/3297761

Mais si vous voulez rendre chaque contrôleur réel après un changement de vue, vous pouvez utiliser

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

J'avais plusieurs vues imbriquées et l'objectif était de recharger une seule avec du contenu. J'ai essayé différentes approches mais la seule chose qui a fonctionné pour moi est:

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

Dans ce cas, seule la vue nécessaire serait rechargée et la mise en cache fonctionnerait toujours.

1
Dmitriy Nevzorov

Si vous utilisez ionic v1, la solution ci-dessus ne fonctionnera pas car ionic a activé la mise en cache des modèles dans le cadre de $ ionicConfigProvider.

La solution est un peu compliquée - vous devez définir le cache sur 0 dans le fichier ionic.angular.js:

$ionicConfigProvider.views.maxCache(0);
1
Maksood

Je sais qu'il y a eu beaucoup de réponses, mais la meilleure façon de le faire sans provoquer un rafraîchissement complet de la page est de créer un paramètre factice sur la route que je souhaite actualiser, puis lorsque j'appelle la route par laquelle je passe. nombre aléatoire au paramètre factice.

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

puis l'appel à cette route

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

Fonctionne comme un charme et gère les résolutions.

1
ewahner

J'ai eu ce problème, il me déchirait la tête, mon routage est lu à partir d'un fichier JSON, puis introduit dans une directive. Je pouvais cliquer sur un état, mais je ne pouvais pas recharger la page. Donc, un de mes collègues m'a montré un joli petit truc pour ça.

  1. Obtenez vos données
  2. Dans la configuration de vos applications, créez un état de chargement.
  3. Enregistrez l'état dans lequel vous souhaitez aller dans le rootscope.
  4. Définissez votre emplacement sur "/ loading" dans votre application.
  5. Dans le contrôleur de chargement, résolvez la promesse de routage puis définissez l'emplacement sur la cible souhaitée.

Cela a fonctionné pour moi.

J'espère que ça aide

0
Evan Burbidge