AngularJs - annuler l'itinéraire événement de changement de

Question

Comment puis-je annuler l'itinéraire événement de changement dans AngularJs?

Mon code actuel est

$rootScope.$on("$routeChangeStart", function (event, next, current) {

// do some validation checks
if(validation checks fails){

    console.log("validation failed");

    window.history.back(); // Cancel Route Change and stay on current page  

}
});

avec cela, même si la validation échoue Angulaire tire le prochain modèle et les données associées, puis retourne immédiatement à la vue précédente/route. Je ne veux pas angulaire de tirer à côté du modèle et des données si la validation échoue, idéalement, il devrait y avoir aucune fenêtre.l'histoire.back(). J'ai même essayé de l'événement.preventDefault (), mais pas de l'utiliser.

Answer 1

Au lieu de $routeChangeStart utiliser $locationChangeStart

Voici la discussion à ce sujet à partir de la angularjs les gars: https://github.com/angular/angular.js/issues/2109

Exemple:

$scope.$on('$locationChangeStart', function(event) {
    if ($scope.form.$invalid) {
       event.preventDefault();
    }
});

Answer 2

Un code plus complet de l'échantillon, à l'aide de "$locationChangeStart":

// assuming you have a module called app, with a 
angular.module('app')
  .controller(
    'MyRootController',
    function($scope, $location, $rootScope, $log) {
      // your controller initialization here ...
      $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        $log.info("location changing to:" + next); 
      });
    }
  );

Je ne suis pas complètement heureux avec l'accrochage de cette opération dans ma racine controller (contrôleur de premier niveau). Si il y a un meilleur modèle, j'aimerais savoir. Je suis nouveau sur angulaire :-)

Answer 3

Une solution consiste à diffuser un " notAuthorized de l'événement, et de l'attraper dans le champ d'application principal de re-modifier l'emplacement. Je pense que ce n'est pas la meilleure solution, mais cela a fonctionné pour moi:

myApp.run(['$rootScope', 'LoginService',
    function ($rootScope, LoginService) {
        $rootScope.$on('$routeChangeStart', function (event, next, current) {
            var authorizedRoles = next.data ? next.data.authorizedRoles : null;
            if (LoginService.isAuthenticated()) {
                if (!LoginService.isAuthorized(authorizedRoles)) {
                    $rootScope.$broadcast('notAuthorized');
                }
            }
        });
    }
]);

et dans mon Contrôleur Principal:

    $scope.$on('notAuthorized', function(){
        $location.path('/forbidden');
    });

Remarque: il y a une discussion sur ce sujet sur angulaire site, non encore résolu: https://github.com/angular/angular.js/pull/4192

Answer 4

Dans le cas où vous avez besoin de faire cesser la voie de changer l' $routeChangeStart événement (c'est à dire que vous voulez faire quelque opération basée sur l'itinéraire suivant), injecter $route et à l'intérieur, $routeChangeStart appel:

$route.reload()