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

209

一个人如何监视/触发路线变化的事件？

javascript angularjs

330

注意：这是旧版本AngularJS的正确答案。有关更新的版本，请参阅此问题。

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

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

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

请参阅$ route文档。

还有其他两个未记录的事件：

$ locationChangeStart
$ locationChangeSuccess

请参阅$ locationChangeSuccess和$ locationChangeStart有什么区别？

— 马克·拉科克
source

38

您还需要在某处注入“ $ route”，否则这些事件将永远不会触发。

— 凯文·比尔

19

$locationChangeStart并$locationChangeSuccess已记录在案！docs.angularjs.org/api/ng.$location

— JP 10 Berge，

2

@KevinBeal谢谢，谢谢，谢谢。我要去弄香蕉，试图弄清楚为什么这些事件没有发生。

— 丹·F

4

只是给每个使用$ state而不是$ route的注释。在这种情况下，您需要注入$ state并使用$ stateChangeStart。

— tomazahlin

7

这是$rootScope.$on("$routeChangeStart", function (event, next, current) {现在。

— abbaf33f 2014年

28

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

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

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

— 扎农
source

1

当我遇到这样的答案并找到诸如.run（）之类的未知信息时，我很喜欢它，尽管在我的特定用例中这不是我需要的事件侦听器，但它对我非常有用。谢谢Zanon！

— Paul J

我正在学习角度。所以我需要知道我们可以从事件，下一个当前参数中获得什么样的信息？

— Monojit Sarkar's

11

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

— honkskillet
source

2

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

— Reamon C.Sumapig
source

-1

这是针对整个初学者的...就像我这样：

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>

展开摘要

— 达雷克
source