web-dev-qa-db-fra.com

Empêcher un stateChange avec angular routeur ui sans utiliser $ rootScope

Mon utilisateur peut quitter un état mais avant de vouloir afficher une boîte de dialogue modale "Voulez-vous enregistrer?"

UNIQUEMENT si les données utilisateur sont sales, cela signifie modifiées.

Ce que je ne veux PAS, c'est coller une propriété isDirty dans mon EditController au $ rootScope aller à l'événement stateChangeStart et y vérifier isDirty puis afficher/pas la boîte de dialogue d'enregistrement.

Empêcher les variables globales dit que chaque livre pour débutants javascript ...

1.) Quel est alors le moyen pro d'empêcher un changement d'état sans pirater le $ rootscope?.

2.) Existe-t-il des bibliothèques d'assistance pour ui-router qui améliorent les crochets de fonction offrant ui-router à l'intérieur du contrôleur pour encapsuler la logique ui?

angularjsangular-ui-router
32
Elisabeth

(1) Selon docs sous Événements de changement d'état 

 $rootScope.$on('$stateChangeStart', 
      function(event, toState, toParams, fromState, fromParams){ 
          event.preventDefault(); 
          // transitionTo() promise will be rejected with 
          // a 'transition prevented' error
 })

Vous pouvez remplacer $ rootScope par $ scope lorsque cela est approprié et fonctionne.

Sous Attacher des données personnalisées aux objets d'état , vous pouvez transmettre des données personnalisées.

(2) Je ne sais pas exactement ce que vous demandez, mais les usines/services/fournisseurs seraient vraiment utiles.

55
tsuz

En utilisant $ transitions.onStart (angular-ui-router 1.0.0-rc), vous pouvez retourner un booléen. Si false la transition sera annulée.

$transitions.onStart({}, function (trans) { 
    var answer = confirm("Want to leave this page?")
    if (!answer) {
        return false;
    }
});

Voici la documentation: https://ui-router.github.io/ng1/docs/latest/modules/transition.html#hookresult

13
Aïssa Ghouti

Bien qu'au moment de l'écriture, il ne fasse pas partie de la version stable, la version 1.0 du routeur UI utilisera la valeur de retour de onEnter/onExit pour empêcher la navigation.

Voir problème GitHub 2219

2
Chic