web-dev-qa-db-fra.com

Effacer l'historique et recharger la page lors de la connexion / déconnexion à l'aide de Ionic Framework

Je suis nouveau dans le développement d'applications mobiles avec Ionic. Lors de la connexion et de la déconnexion, je dois recharger la page afin d'actualiser les données. Cependant, $state.go('mainPage') ramène l'utilisateur à la vue sans le recharger - le contrôleur situé en arrière-plan n'est jamais appelé.

Y a-t-il un moyen d'effacer l'histoire et de recharger l'état dans Ionic?

angularjsangular-ui-routerionic-framework
79
frictionlesspulley

Bienvenue dans le cadre! En fait, le routage dans Ionic est alimenté par i-router . Vous devriez probablement jeter un œil à cette _ précédente questionSO pour trouver deux manières différentes d’y parvenir.

Si vous voulez juste recharger l'état, vous pouvez utiliser:

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

Si vous voulez réellement recharger la page (comme dans, vous voulez tout réamorcer), vous pouvez utiliser:

$window.location.reload(true)

Bonne chance!

123
JimTheDev

J'ai trouvé que la réponse de JimTheDev ne fonctionnait que lorsque la définition de l'état avait cache:false défini. Avec la vue en cache, vous pouvez utiliser $ionicHistory.clearCache() puis $state.go('app.fooDestinationView') si vous passez d'un état à un autre, mais que vous souhaitez l'actualiser.

Voir ma réponse ici car elle nécessite un simple changement de Ionic et j'ai créé une demande d'extraction: https://stackoverflow.com/a/30224972/756177

25
ABCD.ca

La bonne réponse:

$window.location.reload(true);
18
EpokK

J'ai trouvé une solution qui m'a aidé à le faire. La définition de cache-view="false" sur la balise ion-view a résolu mon problème.

<ion-view cache-view="false" view-title="My Title!">
  ....
</ion-view>
18
Rajeshwar

Recharger la page n'est pas la meilleure approche.

vous pouvez gérer des événements de changement d'état pour recharger des données sans recharger la vue elle-même.

lire à propos de le cycle de vie ionicView ici:

http://blog.ionic.io/navigating-the-changes/

et gérer l'événement beforeEnter pour le rechargement des données.

$scope.$on('$ionicView.beforeEnter', function(){
  // Any thing you can think of
});
11
ezain

Dans mon cas, je dois juste effacer la vue et redémarrer le contrôleur. Je pourrais obtenir mon intention avec cet extrait:

$ionicHistory.clearCache([$state.current.name]).then(function() {
  $state.reload();
}

Le cache fonctionne toujours et semble que seule la vue est effacée.

ionic --version dit 1.7.5.

6
glaucomorais

Aucune des solutions mentionnées ci-dessus ne fonctionnait pour un nom d'hôte différent de localhost!

Je devais ajouter notify: false à la liste des options que je passe à _$state.go_, pour éviter d'appeler Angular changez les écouteurs avant que l'appel _$window.location.reload_ soit appelé. Le code final ressemble à:

$state.go('home', {}, {reload: true, notify: false});

>>> EDIT - $ timeout peut être nécessaire en fonction de votre navigateur >>>

$timeout(function () { $window.location.reload(true); }, 100);

<<< FIN DE L'EDIT <<<

Plus d'informations à ce sujet sur référence du routeur ui .

1
Majid Mallis

.state (url: '/ url', contrôleur: Ctl, templateUrl: 'template.html', cache: false) cache: false ==> a résolu mon problème!

0
Mohammed BOUTCHEKKOUCHT

Je devais recharger l'état pour que les barres de défilement fonctionnent. Ils ne travaillaient pas lorsqu'ils passaient par un autre État - "enregistrement". Si l'application était fermée de force après l'enregistrement et rouverte, c'est-à-dire qu'elle passait directement à l'état "d'origine", les barres de défilement fonctionnaient. Aucune des solutions ci-dessus n'a fonctionné.

Quand après l'enregistrement, j'ai remplacé:

$state.go("home");

avec

window.location = "index.html";

L'application rechargée et les barres de défilement ont fonctionné.

0
Tom Andraszek

Le contrôleur est appelé une seule fois, et vous DEVRAIENT conserver ce modèle logique. Ce que je fais habituellement est:

Je crée une méthode $scope.reload(params)

Au début de cette méthode, j'appelle $ionicLoading.show({template:..}) pour afficher mon spinner personnalisé.

Lorsque le processus de rechargement est terminé, je peux appeler $ionicLoading.hide() comme rappel.

Enfin, à l'intérieur du bouton REFRESH, j'ajoute ng-click = "reload(params)"

Le seul inconvénient de cette solution est que vous perdez le système d'historique de navigation ionic

J'espère que cela t'aides!

0
Nourdine Alouane

Comme indiqué par @ezain, ne rechargez les contrôleurs que lorsque cela est nécessaire. Une autre façon plus simple de mettre à jour les données lors du changement d'état plutôt que de recharger le contrôleur consiste à utiliser les événements de diffusion et à les écouter dans les contrôleurs devant mettre à jour les données dans les vues.

Exemple: dans vos fonctions de connexion/déconnexion, vous pouvez faire quelque chose comme ceci:

$scope.login = function(){
    //After login logic then send a broadcast
    $rootScope.$broadcast("user-logged-in");
    $state.go("mainPage");
};
$scope.logout = function(){
   //After logout logic then send a broadcast
   $rootScope.$broadcast("user-logged-out");
   $state.go("mainPage");
};

Dans votre contrôleur mainPage, déclenchez les modifications de la vue en utilisant la fonction $ on pour écouter la diffusion dans le contrôleur mainPage, comme suit:

$scope.$on("user-logged-in", function(){
     //update mainPage view data here eg. $scope.username = 'John';
});

$scope.$on("user-logged-out", function(){
    //update mainPage view data here eg. $scope.username = '';
});
0
Dev

J'essayais de rafraîchir la page en utilisant angularjs quand j'ai vu des sites Web. Je suis confus, mais aucun code ne fonctionne pour le code, puis j'ai obtenu une solution pour recharger une page en utilisant.

$state.go('path',null,{reload:true});

utilisez ceci dans une fonction qui fonctionnera.

0
Krishnaraj

Si vous voulez recharger après le changement de vue, vous devez

$state.reload('state',{reload:true});

Si vous voulez faire de cette vue la nouvelle "racine", vous pouvez dire à ionic que la vue suivante sera la racine

 $ionicHistory.nextViewOptions({ historyRoot: true });
 $state.go('app.xxx');
 return;

Si vous voulez que vos contrôleurs soient rechargés après chaque changement de vue

app.config(function ($stateProvider, $urlRouterProvider, $ionicConfigProvider) {

$ionicConfigProvider.views.maxCache(0);
0
EduLopez