AngularJS'de rota değişikliği nasıl izlenir?

209

Rotadaki bir olay nasıl izlenir / tetiklenir?

javascript angularjs

— Robert Christian
kaynak

330

Not : Bu, AngularJS'nin eski bir sürümü için uygun bir cevaptır. Güncellenmiş sürümler için bu soruya bakın .

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

Aşağıdaki olaylar da mevcuttur (geri arama işlevleri farklı argümanlar alır):

$ routeChangeSuccess
$ routeChangeError
$ routeUpdate - reloadOnSearch özelliği false olarak ayarlanmışsa

$ Route belgelerine bakın .

Belgesiz iki olay daha var:

$ locationChangeStart
$ locationChangeSuccess

Bkz $ locationChangeSuccess ile $ locationChangeStart arasındaki fark nedir?

— Mark Rajcok
kaynak

38

Ayrıca bir yere "$ route" enjekte etmeniz gerekir, aksi halde bu olaylar asla ateşlenmez.

— Kevin Beal

19

$locationChangeStartve $locationChangeSuccessşimdi belgelenmiştir! docs.angularjs.org/api/ng.$location

— JP ten Berge

2

@KevinBeal teşekkür ederim, teşekkür ederim, teşekkür ederim . Muz bu olayların neden ateş etmediğini bulmaya çalışıyordum.

— Dan F

4

Sadece $ route yerine $ state kullanan herkes için bir not. Bu durumda $ state enjekte etmeniz ve $ stateChangeStart kullanmanız gerekir.

— tomazahlin

7

Bu var $rootScope.$on("$routeChangeStart", function (event, next, current) {şimdi.

— abbaf33f

28

Saati belirli bir denetleyiciye yerleştirmek istemiyorsanız, tüm uygulama için saati Angular uygulamasında ekleyebilirsiniz. run()

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

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

— Zanon
kaynak

1

Böyle bir yanıta geldiğimde ve .run () gibi bilmediğim bir şey bulduğumda seviyorum, ancak bu, özel kullanım durumumda olay dinleyicisine ihtiyaç duyduğum yerde olmasa da, benim için çok yararlı. Teşekkürler Zanon!

— Paul J

açısal öğreniyorum. yani olay, sonraki, güncel argüman ne tür bilgi alabilirim bilmek gerekir?

— Monojit Sarkar

11

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

— honkskillet
kaynak

2

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

— Reamon C. Sumapig
kaynak

-1

Bu yeni başlayanlar için ... benim gibi:

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>

Açısal:

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

Umarım bu benim gibi toplam bir acemi yardımcı olur. İşte tam çalışma örneği:

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

Snippet'i genişlet

— Darrelk
kaynak