Bagaimana cara melihat perubahan rute di AngularJS?

209

Bagaimana seseorang menonton / memicu suatu peristiwa pada perubahan rute?

javascript angularjs Robert Christian
sumber

Jawaban:

330

Catatan : Ini adalah jawaban yang tepat untuk versi warisan AngularJS. Lihat pertanyaan ini untuk versi yang diperbarui.

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

Peristiwa berikut juga tersedia (fungsi panggilan baliknya mengambil argumen yang berbeda):

  • $ routeChangeSuccess
  • $ routeChangeError
  • $ routeUpdate - jika properti reloadOnSearch telah disetel ke false

Lihat $ route docs.

Ada dua acara tidak berdokumen lainnya:

  • $ locationChange Mulai
  • $ locationChangeSuccess

Lihat Apa perbedaan antara $ locationChangeSuccess dan $ locationChangeStart?

Mark Rajcok
sumber
38
Anda juga perlu menyuntikkan "$ rute" di suatu tempat atau peristiwa ini tidak pernah terjadi.
Kevin Beal
19
$locationChangeStartdan $locationChangeSuccesssekarang didokumentasikan! docs.angularjs.org/api/ng.$lokasi
JP ten Berge
2
@KevinBeal terima kasih, terima kasih, terima kasih . Saya akan mencoba pisang untuk mencari tahu mengapa peristiwa ini tidak terjadi.
Dan F
4
Hanya catatan untuk semua orang yang menggunakan $ state, bukan $ route. Dalam hal ini Anda perlu menyuntikkan $ state dan menggunakan $ stateChangeStart.
tomazahlin
7
Ini $rootScope.$on("$routeChangeStart", function (event, next, current) {sekarang.
abbaf33f
28

Jika Anda tidak ingin menempatkan arloji di dalam pengontrol tertentu, Anda dapat menambahkan arloji untuk seluruh aplikasi di aplikasi Angular run()

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

myApp.run(function($rootScope) {
    $rootScope.$on("$locationChangeStart", function(event, next, current) { 
        // handle route changes     
    });
});
Zanon
sumber
1
Saya suka ketika saya menemukan jawaban seperti ini dan menemukan sesuatu yang saya tidak tahu seperti .run () meskipun ini bukan tempat saya membutuhkan pendengar acara dalam kasus penggunaan khusus saya, itu sangat berguna bagi saya. Zanon terima kasih!
Paul J
saya belajar sudut. jadi saya perlu tahu info apa yang bisa kita dapatkan dari acara, selanjutnya, argumen saat ini?
Monojit Sarkar
11 
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //..do something
  //event.stopPropagation();  //if you don't want event to bubble up 
});
klakson
sumber
2 
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
  //if you want to interrupt going to another location.
  event.preventDefault();  });
Reamon C. Sumapig
sumber
-1

Ini untuk total pemula ... seperti saya:

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>

Sudut:

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

Semoga ini bisa membantu pemula total seperti saya. Berikut adalah contoh kerja penuh:

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

Darrelk
sumber