Wie kann ich in AngularJS auf eine Routenänderung achten?

209

Wie würde man ein Ereignis auf einer Routenänderung beobachten / auslösen?

javascript angularjs

— Robert Christian
quelle

330

Hinweis : Dies ist die richtige Antwort für eine ältere Version von AngularJS. In dieser Frage finden Sie aktualisierte Versionen.

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

Die folgenden Ereignisse sind ebenfalls verfügbar (ihre Rückruffunktionen verwenden unterschiedliche Argumente):

$ routeChangeSuccess
$ routeChangeError
$ routeUpdate - wenn die Eigenschaft reloadOnSearch auf false gesetzt wurde

Siehe die $ route- Dokumente.

Es gibt zwei weitere undokumentierte Ereignisse:

$ locationChangeStart
$ locationChangeSuccess

Siehe Was ist der Unterschied zwischen $ locationChangeSuccess und $ locationChangeStart?

— Mark Rajcok
quelle

38

Sie müssen auch irgendwo "$ route" injizieren, sonst werden diese Ereignisse nie ausgelöst.

— Kevin Beal

19

$locationChangeStartund $locationChangeSuccesssind jetzt dokumentiert! docs.angularjs.org/api/ng.$location

— JP ten Berge

2

@ KevinBeal danke, danke, danke . Ich ging Bananen, um herauszufinden, warum diese Ereignisse nicht ausgelöst wurden.

— Dan F

4

Nur eine Notiz für alle, die $ state anstelle von $ route verwenden. In diesem Fall müssen Sie $ state injizieren und $ stateChangeStart verwenden.

— Tomazahlin

7

Es ist $rootScope.$on("$routeChangeStart", function (event, next, current) {jetzt.

— Abbaf33f

28

Wenn Sie die Uhr nicht in einem bestimmten Controller platzieren möchten, können Sie die Uhr für die gesamte Anwendung in der Angular-App hinzufügen run()

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

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

— Zanon
quelle

1

Ich liebe es, wenn ich auf eine Antwort wie diese stoße und etwas finde, von dem ich nichts wusste, wie z. B. .run (), obwohl ich hier in meinem speziellen Anwendungsfall nicht den Ereignis-Listener brauchte, ist es für mich sehr nützlich. Danke Zanon!

— Paul J

Ich lerne eckig. Also muss ich wissen, welche Art von Informationen wir vom Ereignis erhalten können, nächstes, aktuelles Argument?

— Monojit Sarkar

11

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

— Honkskillet
quelle

2

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

— Reamon C. Sumapig
quelle

-1

Dies ist für den absoluten Anfänger ... wie ich:

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>

Winkel:

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

Hoffe das hilft einem absoluten Anfänger wie mir. Hier ist das vollständige Arbeitsbeispiel:

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

Erweitern Sie das Snippet

— Darrelk
quelle