Javascript 如何观察 AngularJS 中的路线变化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14765719/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to watch for a route change in AngularJS?
提问by Robert Christian
How would one watch/trigger an event on a route change?
如何观察/触发路线变化上的事件？
回答by Mark Rajcok
Note: This is a proper answer for a legacy version of AngularJS. See this questionfor updated versions.
注意：这是对旧版 AngularJS 的正确答案。有关更新版本，请参阅此问题。
$scope.$on('$routeChangeStart', function($event, next, current) {
// ... you could trigger something here ...
});
The following events are also available (their callback functions take different arguments):
以下事件也可用（它们的回调函数采用不同的参数）：
- $routeChangeSuccess
- $routeChangeError
- $routeUpdate - if reloadOnSearchproperty has been set to false
- $routeChangeSuccess
- $routeChangeError
- $routeUpdate - 如果reloadOnSearch属性已设置为 false
See the $routedocs.
请参阅$route文档。
There are two other undocumentedevents:
还有另外两个未记录的事件：
- $locationChangeStart
- $locationChangeSuccess
- $locationChangeStart
- $locationChangeSuccess
See What's the difference between $locationChangeSuccess and $locationChangeStart?
回答by Zanon
If you don't want to place the watch inside a specific controller, you can add the watch for the whole aplication in Angular app run()
如果您不想将手表放在特定的控制器中，您可以在 Angular 应用程序中为整个应用程序添加手表 run()
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
// handle route changes
});
});
回答by honkskillet
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//..do something
//event.stopPropagation(); //if you don't want event to bubble up
});
回答by Reamon C. Sumapig
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//if you want to interrupt going to another location.
event.preventDefault(); });
回答by Darrelk
This is for the total beginner... like me:
这是给初学者的……像我一样：
HTML:
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>
Angular:
角度：
//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:....
});
});
Hope this helps a total beginner like me. Here is the full working sample:
希望这可以帮助像我这样的初学者。这是完整的工作示例：
<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>