Как следить за изменением маршрута в AngularJS?

209

Как можно было бы наблюдать / запускать событие при изменении маршрута?

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

— Томазахлин

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     
    });
});

— Zanon
источник

1

Мне нравится, когда я сталкиваюсь с ответом, подобным этому, и нахожу что-то, о чем я не знаю, например .run (), хотя это не то место, где мне нужен был прослушиватель событий в моем конкретном случае использования, это очень полезно для меня. Спасибо, Занон!

— Пол Дж

Я учусь на английском. поэтому мне нужно знать, какую информацию мы можем получить из события, следующего, текущего аргумента?

— Моножит Саркар

11

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

— honkskillet
источник

2

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

— Reamon C. Sumapig
источник

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

Развернуть фрагмент

— Darrelk
источник