¿Cómo observar un cambio de ruta en AngularJS?

209

¿Cómo se vería / dispararía un evento en un cambio de ruta?

javascript angularjs

— Robert Christian
fuente

330

Nota : Esta es una respuesta adecuada para una versión heredada de AngularJS. Vea esta pregunta para versiones actualizadas.

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

Los siguientes eventos también están disponibles (sus funciones de devolución de llamada toman diferentes argumentos):

$ routeChangeSuccess
$ routeChangeError
$ routeUpdate: si la propiedad reloadOnSearch se ha establecido en falso

Ver los $ route docs.

Hay otros dos eventos indocumentados :

$ locationChangeStart
$ locationChangeSuccess

Consulte ¿Cuál es la diferencia entre $ locationChangeSuccess y $ locationChangeStart?

— Mark Rajcok
fuente

38

También debe inyectar "$ route" en algún lugar o estos eventos nunca se activarán.

— Kevin Beal

19

$locationChangeStarty $locationChangeSuccessahora están documentados! docs.angularjs.org/api/ng.$location

— JP ten Berge

2

@KevinBeal gracias, gracias, gracias . Me estaba volviendo loco tratando de averiguar por qué estos eventos no se dispararon.

— Dan F

44

Solo una nota para todos los que usan $ state, en lugar de $ route. En ese caso, debe inyectar $ state y usar $ stateChangeStart.

— tomazahlin

77

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

— abbaf33f

28

Si no desea colocar el reloj dentro de un controlador específico, puede agregar el reloj para toda la aplicación en la aplicación Angular run()

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

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
});

— Zanon
fuente

1

Me encanta cuando encuentro una respuesta como esta y encuentro algo que no sabía como .run () aunque no es donde necesitaba el detector de eventos en mi caso de uso particular, es muy útil para mí. Gracias zanon

— Paul J

Estoy aprendiendo angular. así que necesito saber qué tipo de información podemos obtener del evento, el próximo argumento actual.

— Monojit Sarkar

11

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //..do something
  //event.stopPropagation();  //if you don't want event to bubble up 
});

— honkskillet
fuente

2

$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //if you want to interrupt going to another location.
  event.preventDefault();  });

— Reamon C. Sumapig
fuente

-1

Esto es para el principiante total ... como yo:

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>

Angular:

//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:....
   });
});

Espero que esto ayude a un principiante como yo. Aquí está la muestra de trabajo completa:

<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>

Expandir fragmento

— Darrelk
fuente