web-dev-qa-db-fra.com

Comment faire angular état parent ui-router toujours exécuter le code du contrôleur lorsque l'état change?

Disons que nous avons une relation parent-enfant définie dans notre $ stateProvider comme suit:

    .state('myProfile', {
        url: "/my/profile",
        templateUrl: 'my/profile.html',
        controller: 'MyProfileController'
    }).state('myProfile.edit', {
        url: "/edit",
        templateUrl: 'my/profile.edit.html',
        controller: 'EditMyProfileController'
    });

L'idée ici est que l'état parent myProfile n'est pas modifiable, mais l'enfant myProfile.edit state est le formulaire réel pour modifier le profil. Ignorons si c'est ainsi que devrait fonctionner une page de profil - je ne fais que jouer avec les choses et apprendre.

Lorsqu'un utilisateur soumet le formulaire, j'utilise l'objet $ state pour revenir à la page parent:

$scope.save = function() {
    userResource.update($scope.user, function() {
        SessionService.refresh();

        $state.go('myProfile'); // also tried with reload: true as well
    });
}

Une fois que l'utilisateur a enregistré les données de profil - et qu'il est enregistré correctement - la vue du parent n'est pas mise à jour à moins que je n'appuie sur F5 et actualise le navigateur.

Une chose que j'ai remarquée, c'est que si je fais l'enfant myProfile.edit se transforme en parent lui-même et non en enfant de l'état myProfile, ce problème disparaît et les choses se comportent comme prévu (bien que la mise en page soit mauvaise comme celle-ci).

Il semble que UI Router cache peut-être le résultat du parent, sans se douter que les choses ont changé dans le modèle et qu'il doit réexécuter le contrôleur?

Comment puis-je conserver ma relation parent-enfant tout en ayant la page parent myProfile toujours exécuter son contrôleur pour recharger ses données? Fondamentalement, je veux que cela se produise chaque fois que $state est utilisé ou lorsque vous cliquez sur un lien pointant vers myProfile. Comment puis je faire ça?

Et si je ne peux pas faire ce que je demande, je suis conscient que je peux configurer un groupe d'états enfants et les faire fonctionner comme prévu ... cependant, comment puis-je définir l'état enfant par défaut pour le parent? Par exemple, disons que je veux myProfile.edit pour être l'état enfant par défaut de myProfile - comment faire?

Merci!

javascriptangularjsstateangular-uiangular-ui-router
28
egervari

Pour forcer un état parent à se recharger lorsque vous accédez à lui à partir d'un état enfant, vous pouvez utiliser les deux méthodes ci-dessous. Pure js ou un attribut de directive.

<a ui-sref="myProfile" ui-sref-opts="{ reload: true }">Back to My Profile</a>

ou

$state.go('myProfile', null, { reload: true });
35
Afonso Praça

Avez-vous essayé d'écouter l'événement "$ stateChangeStart" et/ou d'utiliser $ state.reload ()?

3
adrichman

Il semble qu'il y ait un bogue sur $ state.go qui laisse de côté les options de rechargement. $ state.transitionTo fonctionne cependant pour moi.

$state.transitionTo('state',null,{reload: true});
2
Ammadu