如何在AngularJS中观察路由变化?

如何在路线改变时观察/触发事件?

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

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

以下事件也可用(它们的回调函数采用不同的参数):

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

参见$route文档。

还有另外两个未记录的事件:

locationChangeStart美元 locationChangeSuccess美元

查看$locationChangeSuccess和$locationChangeStart之间的区别是什么?

2013-02-08 04:57:50

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

2015-09-29 12:55:17

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

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

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

2016-05-08 13:59:34

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

2017-04-03 06:25:17

这是为初学者准备的。像我这样的人,

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>

2019-11-01 08:14:46

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

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

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

在我的配置中，我使用了来自节点包管理器(npm)的@ui-router/angularjs (a.k.a angular-ui-router)

2021-07-14 06:19:49

如何在AngularJS中观察路由变化?

推荐文章

最新文章

标签