Làm thế nào để theo dõi sự thay đổi tuyến đường trong AngularJS?

209

Làm thế nào một người theo dõi / kích hoạt một sự kiện trên một tuyến đường thay đổi?

javascript angularjs

— Robert Christian
nguồn

330

Lưu ý : Đây là một câu trả lời thích hợp cho phiên bản kế thừa của AngularJS. Xem câu hỏi này cho các phiên bản cập nhật.

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

Các sự kiện sau đây cũng có sẵn (các hàm gọi lại của chúng có các đối số khác nhau):

$ routeChangeSuccess
$ tuyếnChangeError
$ routeUpdate - nếu thuộc tính reloadOnSearch đã được đặt thành false

Xem các tài liệu tuyến đường $ .

Có hai sự kiện không có giấy tờ khác :

$ locationChangeStart
$ locationChangeSuccess

Xem sự khác biệt giữa $ locationChangeSuccess và $ locationChangeStart là gì?

— Mark Rajcok
nguồn

38

Bạn cũng cần phải tiêm "$ tuyến" ở đâu đó hoặc những sự kiện này không bao giờ xảy ra.

— Kevin Beal

19

$locationChangeStartvà $locationChangeSuccessbây giờ được ghi lại! docs.angularjs.org/api/ng.$location

— JP ten Berge

2

@KevinBeal cảm ơn bạn, cảm ơn bạn, cảm ơn bạn . Tôi đang đi chuối cố gắng tìm ra lý do tại sao những sự kiện này không xảy ra.

— Dan F

4

Chỉ cần một lưu ý cho tất cả mọi người sử dụng $ state, thay vì $ route. Trong trường hợp đó, bạn cần tiêm $ state và sử dụng $ stateChangeStart.

— tomazahlin

7

Đó là $rootScope.$on("$routeChangeStart", function (event, next, current) {bây giờ.

— abbaf33f

28

Nếu bạn không muốn đặt đồng hồ bên trong một bộ điều khiển cụ thể, bạn có thể thêm đồng hồ cho toàn bộ ứng dụng trong ứng dụng Angular run()

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

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

— Zanon
nguồn

1

Tôi thích nó khi tôi bắt gặp một câu trả lời như thế này và tìm thấy một cái gì đó tôi không biết về như thế .sl () mặc dù đây không phải là nơi tôi cần người nghe sự kiện trong trường hợp sử dụng cụ thể của mình, nó rất hữu ích với tôi. Cảm ơn Zanon!

— Paul J

tôi đang học góc cạnh. vì vậy tôi cần biết loại thông tin nào chúng ta có thể nhận được từ sự kiện, đối số tiếp theo, hiện tại?

— Monojit Sarkar

11

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

— honkskillet
nguồn

2

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

— Reamon C. Sumapig
nguồn

-1

Đây là dành cho người mới bắt đầu ... như tôi:

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>

Góc cạnh:

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

Hy vọng điều này sẽ giúp một người mới bắt đầu như tôi. Dưới đây là mẫu làm việc đầy đủ:

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

Mở rộng đoạn trích

— Darrelk
nguồn