Come guardare per un cambio di rotta in AngularJS?

209

Come si potrebbe guardare / innescare un evento su una rotta cambia?

javascript angularjs

— Robert Christian
fonte

330

Nota : questa è una risposta corretta per una versione legacy di AngularJS. Vedi questa domanda per le versioni aggiornate.

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

Sono inoltre disponibili i seguenti eventi (le loro funzioni di callback accettano argomenti diversi):

$ routeChangeSuccess
$ routeChangeError
$ routeUpdate - se la proprietà reloadOnSearch è stata impostata su false

Vedi i documenti $ route .

Esistono altri due eventi non documentati :

$ locationChangeStart
$ locationChangeSuccess

Vedi Qual è la differenza tra $ locationChangeSuccess e $ locationChangeStart?

— Mark Rajcok
fonte

38

Devi anche iniettare "$ route" da qualche parte o questi eventi non si attivano mai.

— Kevin Beal,

19

$locationChangeStarte $locationChangeSuccessora sono documentati! docs.angularjs.org/api/ng.$location

— JP ten Berge

2

@KevinBeal grazie, grazie, grazie . Stavo andando banane cercando di capire perché questi eventi non si sono attivati.

— Dan F

4

Solo una nota per tutti coloro che usano $ state, anziché $ route. In tal caso è necessario iniettare $ state e utilizzare $ stateChangeStart.

— Tomazahlin,

7

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

— abbaf33f,

28

Se non si desidera posizionare l'orologio all'interno di un controller specifico, è possibile aggiungere l'orologio per l'intera applicazione nell'app Angular run()

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

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

— Zanon
fonte

1

Mi piace quando trovo una risposta come questa e trovo qualcosa di cui non sapevo come .run () anche se non è qui che avevo bisogno dell'ascoltatore di eventi nel mio particolare caso d'uso, è molto utile per me. Grazie Zanon!

— Paul J,

sto imparando angolare. quindi ho bisogno di sapere che tipo di informazioni possiamo ottenere dall'evento, dal prossimo, argomento attuale?

— Monojit Sarkar,

11

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

— honkskillet
fonte

2

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

— Reamon C. Sumapig
fonte

-1

Questo è per il principiante totale ... come me:

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>

Angolare:

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

Spero che questo aiuti un principiante totale come me. Ecco l'esempio di lavoro completo:

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

Espandi frammento

— Darrelk
fonte