Comment surveiller un changement d'itinéraire dans AngularJS?

209

Comment regarder / déclencher un événement sur un changement d'itinéraire?

javascript angularjs Robert Christian
la source

Réponses:

330

Remarque : Il s'agit d'une bonne réponse pour une version héritée d'AngularJS. Voir cette question pour les versions mises à jour.

$scope.$on('$routeChangeStart', function($event, next, current) { 
   // ... you could trigger something here ...
 });

Les événements suivants sont également disponibles (leurs fonctions de rappel prennent différents arguments):

  • $ routeChangeSuccess
  • $ routeChangeError
  • $ routeUpdate - si la propriété reloadOnSearch a été définie sur false

Voir les documents $ route .

Il existe deux autres événements non documentés :

  • $ locationChangeStart
  • $ locationChangeSuccess

Voir Quelle est la différence entre $ locationChangeSuccess et $ locationChangeStart?

Mark Rajcok
la source
38
Vous devez également injecter "$ route" quelque part ou ces événements ne se déclenchent jamais.
Kevin Beal
19
$locationChangeStartet $locationChangeSuccesssont désormais documentés! docs.angularjs.org/api/ng.$location
JP ten Berge
2
@KevinBeal merci, merci, merci . J'allais des bananes en essayant de comprendre pourquoi ces événements n'avaient pas eu lieu.
Dan F
4
Juste une note pour tous ceux qui utilisent $ state, au lieu de $ route. Dans ce cas, vous devez injecter $ state et utiliser $ stateChangeStart.
tomazahlin
7
C'est $rootScope.$on("$routeChangeStart", function (event, next, current) {maintenant.
abbaf33f
28

Si vous ne souhaitez pas placer la montre dans un contrôleur spécifique, vous pouvez ajouter la montre pour toute l'application dans l'application Angular run()

var myApp = angular.module('myApp', []);

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
});
Zanon
la source
1
J'adore quand je tombe sur une réponse comme celle-ci et que je trouve quelque chose que je ne connaissais pas comme .run () bien que ce ne soit pas là que j'avais besoin de l'écouteur d'événements dans mon cas d'utilisation particulier, il est très utile pour moi. Merci Zanon!
Paul J
j'apprends angulaire. J'ai donc besoin de savoir quel type d'informations nous pouvons obtenir de l'événement, ensuite, de l'argument actuel?
Monojit Sarkar
11 
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //..do something
  //event.stopPropagation();  //if you don't want event to bubble up 
});
honkskillet
la source
2 
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //if you want to interrupt going to another location.
  event.preventDefault();  });
Reamon C. Sumapig
la source
-1

C'est pour le débutant total ... comme moi:

HTML: 

  <ul>
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#Info"> Info </a>
    </li>
  </ul>

  <div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-view>

    </div>
  </div>

Angulaire:

//Create App
var app = angular.module("myApp", ["ngRoute"]);

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
      .otherwise({ template: "<p>Coming soon</p>" })
      .when("/", {
        template: "<p>Home information</p>"
      })
      .when("/Info", {
        template: "<p>Basic information</p>"
        //templateUrl: "/content/views/Info.html"
      });
});

//Controller
app.controller('MainCtrl', function ($scope, $rootScope, $location) {
  $scope.location = $location.path();
  $rootScope.$on('$routeChangeStart', function () {
    console.log("routeChangeStart");
   //Place code here:....
   });
});

J'espère que cela aide un débutant total comme moi. Voici l'exemple de travail complet:

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-route.min.js"></script>
</head>
<body>
  <ul>
    <li>
      <a href="#"> Home </a>
    </li>
    <li>
      <a href="#Info"> Info </a>
    </li>
  </ul>

  <div ng-app="myApp" ng-controller="MainCtrl">
    <div ng-view>

    </div>
  </div>
  <script>
//Create App
var app = angular.module("myApp", ["ngRoute"]);

//Configure routes
app.config(function ($routeProvider) {
    $routeProvider
      .otherwise({ template: "<p>Coming soon</p>" })
      .when("/", {
        template: "<p>Home information</p>"
      })
      .when("/Info", {
        template: "<p>Basic information</p>"
        //templateUrl: "/content/views/Info.html"
      });
});

//Controller
app.controller('MainCtrl', function ($scope, $rootScope, $location) {
  $scope.location = $location.path();
  $rootScope.$on('$routeChangeStart', function () {
    console.log("routeChangeStart");
   //Place code here:....
   });
});
  </script>
</body>
</html>
Développer l'extrait

Darrelk
la source