Як слідкувати за зміною маршруту в AngularJS?


Відповіді:


330

Примітка . Це правильна відповідь для застарілої версії AngularJS. Дивіться це питання для оновлених версій.

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

Також доступні такі події (їх функції зворотного виклику беруть різні аргументи):

  • $ routeChangeSuccess
  • $ routeChangeError
  • $ routeUpdate - якщо для властивості reloadOnSearch встановлено значення false

Дивіться документи $ route .

Є ще два незадокументовані події:

  • $ locationChangeStart
  • $ locationChangeSuccess

Дивіться , яка різниця між $ locationChangeSuccess та $ locationChangeStart?


38
Вам також потрібно кудись ввести "$ route", інакше ці події ніколи не запускаються.
Кевін Біл

19
$locationChangeStartі $locationChangeSuccessзараз вони документально підтверджені! docs.angularjs.org/api/ng.$location
JP ten Berge

2
@KevinBeal дякую, дякую, дякую . Я збирався банани, намагаючись з'ясувати, чому ці події не загорілися.
Дан Ф

4
Просто примітка для всіх, хто використовує $ state, а не $ route. У цьому випадку вам потрібно ввести $ state і використовувати $ stateChangeStart.
tomazahlin

7
Це $rootScope.$on("$routeChangeStart", function (event, next, current) {зараз.
abbaf33f

28

Якщо ви не хочете розміщувати годинник у певному контролері, ви можете додати годинник для всього додатка у програмі Angular run()

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

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

1
Мені подобається, коли я натрапляю на таку відповідь і знаходжу щось, про що я не знав, як. Дякую Занон!
Пол J

я навчаюсь кутовим. тож мені потрібно знати, яку інформацію ми можемо отримати від події, наступного, поточного аргументу?
Монойт Саркар

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


-1

Це для початківців ... як я:

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>

Кутовий:

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

Сподіваюсь, це допомагає в цілому новачкові, як я. Ось повний робочий зразок:

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

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.