如何在 AngularJS 中观察路线变化？答案

【问题标题】：How to watch for a route change in AngularJS?如何在 AngularJS 中观察路线变化？
【发布时间】：2013-01-23 19:32:55
【问题描述】：

如何观察/触发路线变化的事件？

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

由于某种原因，使用 $routeChangeStart 事件的建议解决方案对我不起作用

如果你遇到同样的问题，试试：

$scope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) { 
   // ... you could trigger something here ...
 });

在我的配置中，我使用来自节点包管理器（又名 npm）的 @ui-router/angularjs（又名 angular-ui-router）

【讨论】：

【解决方案2】：

这是给初学者的......像我一样：

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>

【讨论】：

【解决方案3】：

注意：这是 AngularJS 旧版本的正确答案。更新版本见this question。

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

以下事件也可用（它们的回调函数采用不同的参数）：

$routeChangeSuccess
$routeChangeError
$routeUpdate - 如果 reloadOnSearch 属性已设置为 false

请参阅$route 文档。

还有另外两个undocumented 事件：

$locationChangeStart
$locationChangeSuccess

见What's the difference between $locationChangeSuccess and $locationChangeStart?

【讨论】：

您还需要在某处注入“$route”，否则这些事件永远不会触发。
$locationChangeStart 和 $locationChangeSuccess 现已记录在案！ docs.angularjs.org/api/ng.$location
@KevinBeal 谢谢，谢谢，谢谢。我正忙着想弄清楚为什么这些事件没有触发。
只是给所有使用 $state 而不是 $route 的人的说明。在这种情况下，您需要注入 $state 并使用 $stateChangeStart。
现在是$rootScope.$on("$routeChangeStart", function (event, next, current) {。

【解决方案4】：

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

【讨论】：

【解决方案5】：

如果您不想将手表放在特定控制器中，您可以在 Angular 应用 run() 中为整个应用程序添加手表

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

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

【讨论】：

当我遇到这样的答案并找到我不知道的东西时，我喜欢它，比如 .run() 虽然这不是我在特定用例中需要事件监听器的地方，它对我很有用。谢谢扎农！
我正在学习角度。所以我需要知道我们可以从事件、下一个、当前参数中获得什么样的信息？

【解决方案6】：

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

【讨论】：