AngularJS $ location ne change pas le chemin

Je rencontre un problème avec la modification de l'URL de la page après l'envoi d'un formulaire.

Voici le flux de mon application:

1. Les itinéraires sont définis, l'URL est reconnue vers une page de formulaire.
2. Les pages chargent, le contrôleur définit les variables, les directives sont déclenchées.
3. Une directive de formulaire spéciale est déclenchée qui effectue une soumission de formulaire spéciale à l'aide d'AJAX.
4. Après l'exécution de l'AJAX (Angular ne s'occupe pas de l'AJAX), un rappel est déclenché et la directive appelle la $scope.onAfterSubmitfonction qui définit l'emplacement.

Le problème est qu'après avoir défini l'emplacement, rien ne se passe. J'ai également essayé de définir le paramètre d'emplacement sur /... Non. J'ai également essayé de ne pas soumettre le formulaire. Rien ne fonctionne.

J'ai testé pour voir si le code atteint la onAfterSubmitfonction (ce qu'il fait).

Ma seule pensée est que d'une manière ou d'une autre, la portée de la fonction est modifiée (depuis qu'elle est appelée à partir d'une directive), mais comment peut-elle être appelée onAfterSubmitsi la portée a changé?

Voici mon code

var Ctrl = function($scope, $location, $http) {
  $http.get('/resources/' + $params.id + '/edit.json').success(function(data) {
    $scope.resource = data;
  });

  $scope.onAfterSubmit = function() {
    $location.path('/').replace();
  };
}
Ctrl.$inject = ['$scope','$location','$http'];

Quelqu'un peut m'aider s'il vous plaît?

J'ai eu un problème similaire il y a quelques jours. Dans mon cas, le problème était que j'ai changé les choses avec une bibliothèque tierce (jQuery pour être précis) et dans ce cas, même si l'appel de fonctions et la définition de variables fonctionnent, Angular ne reconnaît pas toujours qu'il y a des changements, il ne digère donc jamais.

$ apply () est utilisé pour exécuter une expression angulaire depuis l'extérieur du cadre angulaire. (Par exemple, à partir d'événements DOM du navigateur, setTimeout, XHR ou des bibliothèques tierces).

Essayez de l'utiliser $scope.$apply()juste après avoir changé l'emplacement et appelé replace()pour informer Angular que les choses ont changé.

Au lieu de $location.path(...)changer ou d'actualiser la page, j'ai utilisé le service $window. Dans Angular, ce service est utilisé comme interface avec l' windowobjet, et l' windowobjet contient une propriété locationqui vous permet de gérer les opérations liées à l'emplacement ou à l'URL.

Par exemple, avec window.locationvous pouvez attribuer une nouvelle page, comme ceci:

$window.location.assign('/');

Ou actualisez-le, comme ceci:

$window.location.reload();

Cela a fonctionné pour moi. C'est un peu différent de ce à quoi vous vous attendez mais fonctionne pour l'objectif donné.

J'ai eu le même problème, mais mon appel à $ location était DÉJÀ dans un résumé. L'appel de $ apply () vient de donner une erreur $ digest déjà en cours de traitement.

Cette astuce a fonctionné (et assurez-vous d'injecter $locationdans votre contrôleur):

$timeout(function(){ 
   $location...
},1);

Bien que je ne sache pas pourquoi c'était nécessaire ...

J'ai dû intégrer ma $location.path()déclaration comme ceci car mon résumé était toujours en cours d'exécution:

       function routeMe(data) {                
            var waitForRender = function () {
                if ($http.pendingRequests.length > 0) {
                    $timeout(waitForRender);
                } else {
                    $location.path(data);
                }
            };
            $timeout(waitForRender);
        }

Dans mon cas, le problème était l'indicateur de paramètre facultatif ('?') Manquant dans la configuration de mon modèle.

Par exemple:

.when('/abc/:id?', {
    templateUrl: 'views/abc.html',
    controller: 'abcControl'
})


$location.path('/abc');

Sans le caractère d'interrogation, l'itinéraire ne changerait évidemment pas en supprimant le paramètre d'itinéraire.

Si l'un d'entre vous utilise le routeur Angular-ui / ui-router, utilisez: $state.go('yourstate')au lieu de $location. Cela a fait l'affaire pour moi.

Cela fonctionne pour moi (dans CoffeeScript)

 $location.path '/url/path'
 $scope.$apply() if (!$scope.$$phase)

À mon avis, la plupart des réponses ici semblent un peu haceuses (par exemple $ apply () ou $ timeout), car jouer avec $ apply () peut conduire à des erreurs indésirables.

Habituellement, lorsque $ location ne fonctionne pas, cela signifie que quelque chose n'a pas été implémenté de manière angulaire.

Dans cette question particulière, le problème semble être dans la partie AJAX non angulaire. J'ai eu un problème similaire, où la redirection à l'aide de $ location devrait avoir lieu après une promesse résolue. Je voudrais illustrer le problème sur cet exemple.

L'ancien code:

taskService.createTask(data).then(function(code){
            $location.path("task/" + code);
        }, function(error){});

Remarque: taskService.createTask renvoie une promesse.

$ q - la manière angulaire d'utiliser les promesses:

let dataPromises = [taskService.createTask(data)];
        $q.all(dataPromises).then(function(response) {
                let code = response[0];
                $location.path("task/" + code);
            }, 
            function(error){});

L'utilisation de $ q pour résoudre la promesse a résolu le problème de redirection.

En savoir plus sur le service $ q: https://docs.angularjs.org/api/ng/service/ $ q

setTimeout(function() { $location.path("/abc"); },0);

Cela devrait résoudre votre problème.