11
votes

Erreur Infdig Angularjs Infdig lors de la modification de l'état de l'UI-Routeur (avec vidéo)

nouvelle édition: strong> l'authservice qui vérifie le login em>: xxx pré>

mise à jour:
Malheureusement, cela fait partie d'une application Web entière, donc je ne peux pas la télécharger sur jsfiddle. J'ai fait une vidéo YouTube où je montrais exactement l'erreur pendant que je déboque de l'application. À partir de la minute 1:30 Démarre le problème.Feel gratuitement pour examiner la vidéo de
Vous trouverez ci-dessous l'application app.js forte> de mon application angulaire. p>

la montre $ que j'ai dans les modèles, créez l'erreur? EM> P>

YouTube, après 1h30 Démarre le Erreur forte>: https://www.youtube.com /watch?v=3cc2--bkdq4&feature=youtu.be p>

Lorsque vous chargez d'abord le site, l'écran de connexion charge et demande les informations d'identification. P>

Si l'utilisateur Connectez-vous à rediriger vers la page Part4 (à partir de l'intérieur du contrôleur de connexion), jusqu'à présent, si bon! p>

Le problème est chaque fois que j'ouvre un nouvel onglet sur le navigateur, essayez de charger le site Web: P>

  1. Il convient de voir que l'utilisateur est déjà enregistré et le redirige sur la page Part4. P> li>

  2. au lieu de cela, comme je le vois sur le débogage du navigateur, il va à la résolution: Connexion P> Li>

  3. alors il monte à l'intérieur de $ rootscope. $ sur ('$ statechangeError', code> et à la go.state (partie> p> p> p>

  4. alors il va à la résolution de Part4, puis il passe à la résolution de la connexion et à nouveau à la fonction $ statechangerError p> li> OL>

    5.Et enfin, je reçois l'erreur: Erreur: [$ Rootscope: infdig] http://errors.angularjs.org/1.4.8/ArroroTrootscope/infdig?p0=10&p1= % 5B% 5D code> Mais l'étrange est que cela redirige enfin à la page Part4, mais avec cette erreur !! p>

    Peut-on peut-être m'aider s'il vous plaît. P>

    'use strict';
    
    var app = angular.module('MainApp', ['mApp',
        'MainApp.loginModule',
        'MainApp.part4Module',
        'MainApp.part5Module',
        'MainApp.eventModule',
        'ui.router', 'ui.router.tabs', 'ngCookies']);
    
    angular.module('MainApp')
        .run(['$rootScope', '$state', '$cookieStore', 'authService', function ($rootScope, $state, $cookieStore, authService) {
            $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
                if (error.unAuthorized) {
                    $state.go('login');
                }
                else if (error.authorized) {
                    $state.go('part4');
                }
            });
    
            authService.user = $cookieStore.get('user');
        }])
        .config(function ($stateProvider, $urlRouterProvider, $locationProvider) { //$stateProvider & $urlRouterProvider are from ui.router module
            $stateProvider
                .state('floorplan', {
                    url: '/floorplan/:activeEventId/:activeHallId/:activeHallVariant',
                    controller: 'ParticipantsCtrl',
                    templateUrl: '/assets/modules/part1/part1.html',
                    resolve: {
                        user: ['authService', '$q', function (authService, $q) {
                            return authService.user || $q.reject({unAuthorized: true});
                        }]
                    }
                })
                .state('event', {
                    url: '/event/:activeEventId',
                    templateUrl: 'assets/modules/event/eventPartial.html',
                    controller: 'eventctrl',
                    resolve: {
                        user: ['authService', '$q', function (authService, $q) {
                            return authService.user || $q.reject({unAuthorized: true});
                        }]
                    }
                })
                .state('part4', {
                    url: '/part4',
                    resolve: {
                        user: ['authService', '$q', function (authService, $q) {
                            return authService.user || $q.reject({unAuthorized: true});
                        }]
                    },
                    controller: 'part4ctrl',
                    templateUrl: '/assets/modules/part4/part4Partial.html'
                })
                .state('login', {
                    url: '/login',
                    controller: 'LoginCtrl',
                    templateUrl: '/assets/modules/login/login.html',
                    resolve: {
                        user: ['authService', '$q', function (authService, $q) {
                            if (authService.user) {   
                             return $q.reject({authorized: true});
                            }
                        }]
                    }
                });
            $urlRouterProvider.otherwise('login');
        });
    


18 commentaires

Je suis un peu confus par votre app.js . Je suis assez sûr que ce devrait être app.run ... pas angulaire.module ('MainApp'). Exécutez


@ Lj.wizard en utilisant angular.module ('MAINTApp') est une meilleure pratique. Ne dépend pas de définir une variable globale


Difficile d'aider sans savoir comment fonctionne l'autorisation


@charlietfl je vois. Merci.


Vous vous engagez dans une boucle infinie .. Pourriez-vous obtenir une erreur .Authoriorisé lorsque vous vous êtes routé vers l'état Part4?


Est authservice A $ ressource objet? Ou fait-il $ http appels? Il serait utile de voir comment ça fonctionne.


Je travaille sur une vidéo en ce moment, je le téléchargerai dans la journée. Merci


J'ai téléchargé une vidéo de débogage sur YouTube avec l'erreur.


@TheOitzaris, pouvez-vous également fournir un échantillon Plunkr , où nous pouvons le reproduire?


Malheureusement, cela fait partie d'une application Web entière, donc je ne peux pas la télécharger sur jsfiddle. J'ai fait une vidéo YouTube où je montrais exactement l'erreur pendant que je déboque de l'application. À partir de la minute 1:30 Démarre le problème.Feel gratuitement pour examiner la vidéo.


Avez-vous essayé ma réponse ou avez-vous besoin de code comme exemple? Je suis sûr que je peux le résoudre une fois que j'ai déjà eu un problème de race avec $ State et d'obtenir l'utilisateur actuel connecté :)


Je n'ai pas essayé votre réponse car c'est un peu comploqué pour moi. Vous avez besoin d'un utilisateur pour vous connecter?


Gardez tout comme et ajoutez $ statechangeStart comme suggéré. Une fois que cela fonctionne, supprimez les autres. Ça va résoudre. Ça marche pour moi. Vous entrez dans une boucle de code fondamentalement


La Warka Watch (ES) pourrait-elle avoir dans les modèles, créez l'erreur? Oui, il peut si un bogue inconnu est là. Mais votre débogage montre différent - est-ce correct?


Oui, cela ne passe dans aucun contrôleur, mais je ne peux pas comprendre ce qui crée l'erreur. Je pense que je vais remplir tous les fichiers JS avec des points d'arrêt.


L'erreur est un événement, une promesse et un changement connexe. J'ai eu de telles erreurs généralement avec la première tentative de clic. StateChangeError Trop de fois semble créer le problème. Une des raisons pour lesquelles je préfère StateCangesteart que StatechangeError. Celles-ci sont des éventualités et lorsqu'elles sont utilisées à l'intérieur de l'exécution seront actives sur le cycle de vie de l'application jusqu'à la destruction manuelle. Essayez la logique inversée avec STATECHANGANGESTART et pour la personnalisation d'une route spécifique, utilisez la résolution. Bon à savoir que la question a été résolue.


Veuillez ne pas modifier une solution dans votre question. Au lieu de cela, postez-le comme une réponse distincte ci-dessous.


Ok, mais gardez à l'esprit que vous avez supprimé toute ma réponse et je dois l'écrire à nouveau depuis le début. Tchin Tchin.


3 Réponses :


2
votes

Pouvez-vous essayer cela inversé?

.run(['$rootScope', '$state', '$cookieStore', 'authService', function ($rootScope, $state, $cookieStore, authService) {
    $rootScope.$on('$stateChangeStart', function (...) {
    authService.user = $cookieStore.get('user');
                if (authService.user) {
                    $state.go('part4');
                }
                else if (!authService.user) {
                    $state.go('login');
                }
            });
}


2 commentaires

C'est $ statechangeError pas $ STATECHANGANGESTART, sinon il navigue aura un problème pour aller sur une page sur les autres que Part4 et Login: P


oui, je veux @ theo-itzaris à approcher de l'authentification et de modifier l'URL à l'aide de $ statecangesteart et initialisation du authservice.user = $ cookiesore.get ("utilisateur"); la configuration. J'approche l'inverse. $ q est inutile ici.



3
votes

Je pense que l'état est résolu en premier parce que vous injectez $ State dans votre application.Run.

qui conduisait à essayer de résoudre la résolution de l'état Part4 avec l'utilisateur non défini, alors l'événement est lancé et sera résolu sur le cycle de digère suivant, de sorte que l'utilisation est initialisée avant d'obtenir Redirecit pour vous connecter, ce qui vous redirigera à Part4.

Essayez de vous séparer en deux angular.Run, le 1er qui dirigera l'init de l'Authservice sans injecter $ State. Le 2e qui injectera l'État $ à init l'auditeur $ statechangeError (définissant simplement le 1ème avant avant le 2ème).

Si ce n'est pas suffisant: diviser votre module: Celui contenant l'authservice dans un module 'A' avec le fichier angulaire dédié.Module ('a'). Exécutez, le 2e dans un module 'B' avec une dépendance à l'autre A 'avec le fichier angulaire.Module (' B '). Courez pour le $ STATECHANGANGERROR


0 commentaires

2
votes

Tout semble bien.

Après de nombreuses heures et de nombreux points d'arrêt, j'ai réalisé que le problème n'était pas causé par aucun Watch () , j'ai beaucoup $ watch sur mes contrôleurs.

C'est juste un problème d'état, comme vous pouvez le constater sur ma question, je n'ai pas eu '/' état, et cela a provoqué la boucle infinie, car:

  1. Lorsque je supprime la partie d'extension de l'URL, j'ai: www.mydomain.com/, puis le $ stateprovider recherche mon 'états' mais ne pouvait pas trouver '/' état, donc il redirige de "se connecter".
  2. dans l'état "Connexion" Je vérifie si l'utilisateur == True et Rejeter erreur.
  3. alors, $ rootscope. $ sur ('$ statechangeError') {..} exerce et j'appelle State.go ('Part4'), il résout l'état 'Part4' et il va à nouveau à l'état "Login" résolve, et encore de la même manière que le nombre maximum d'itérations autorisées du cycle de Digest atteint.

    Comment j'ai résolu

    Je ne sais pas si c'est le meilleur moyen mais j'ai ajouté un état '/' State sur App.js, et cela fonctionne comme prévu: xxx


0 commentaires