Jak obserwować zmianę trasy w AngularJS?

209

Jak można by oglądać / wyzwalać zdarzenie na trasie?

javascript angularjs Robert Christian
źródło

Odpowiedzi:

330

Uwaga : To poprawna odpowiedź na starszą wersję AngularJS. Zobacz to pytanie, aby uzyskać zaktualizowane wersje.

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

Dostępne są również następujące zdarzenia (ich funkcje zwrotne przyjmują różne argumenty):

  • $ routeChangeSuccess
  • $ routeChangeError
  • $ routeUpdate - jeśli właściwość reloadOnSearch została ustawiona na wartość false

Zobacz dokumenty $ route .

Istnieją dwa inne nieudokumentowane zdarzenia:

  • $ locationChangeStart
  • $ locationChangeSuccess

Zobacz Jaka jest różnica między $ locationChangeSuccess a $ locationChangeStart?

Mark Rajcok
źródło
38
Musisz także wstrzyknąć gdzieś „$ route”, w przeciwnym razie zdarzenia te nigdy się nie uruchomią.
Kevin Beal
19
$locationChangeStarti $locationChangeSuccesssą teraz udokumentowane! docs.quarejs.org/api/ng.$location
JP ten Berge
2
@KevinBeal dziękuję, dziękuję, dziękuję . Chodziłem na banany, próbując dowiedzieć się, dlaczego te zdarzenia się nie uruchomiły.
Dan F
4
Uwaga dla wszystkich korzystających z $ state zamiast $ route. W takim przypadku musisz wstrzyknąć $ state i użyć $ stateChangeStart.
tomazahlin
7
Jest $rootScope.$on("$routeChangeStart", function (event, next, current) {teraz
abbaf33f
28

Jeśli nie chcesz umieszczać zegarka w określonym kontrolerze, możesz dodać zegarek dla całej aplikacji w aplikacji Angular run()

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

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
});
Zanon
źródło
1
Uwielbiam to, kiedy napotykam taką odpowiedź i znajduję coś, o czym nie wiedziałem, jak .run (), chociaż nie w tym miejscu potrzebowałem detektora zdarzeń w konkretnym przypadku użycia, jest to dla mnie bardzo przydatne. Dzięki Zanon!
Paul J
uczę się kątowe. więc muszę wiedzieć, jakie informacje możemy uzyskać ze zdarzenia, następnego, bieżącego argumentu?
Monojit Sarkar,
11 
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //..do something
  //event.stopPropagation();  //if you don't want event to bubble up 
});
honkskillet
źródło
2 
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //if you want to interrupt going to another location.
  event.preventDefault();  });
Reamon C. Sumapig
źródło
-1

To jest dla początkującego ... jak ja:

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>

Kątowy:

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

Mam nadzieję, że pomoże to zupełnie początkującemu, tak jak ja. Oto pełna działająca próbka:

<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>
Rozwiń fragment kodu

Darrelk
źródło