一个人如何观察/触发路线变化的事件?
问问题
240327 次
6 回答
333
注意:这是 AngularJS 旧版本的正确答案。请参阅此问题以获取更新版本。
$scope.$on('$routeChangeStart', function($event, next, current) {
// ... you could trigger something here ...
});
以下事件也可用(它们的回调函数采用不同的参数):
- $routeChangeSuccess
- $routeChangeError
- $routeUpdate - 如果reloadOnSearch属性已设置为 false
请参阅$route文档。
还有另外两个未记录的事件:
- $locationChangeStart
- $locationChangeSuccess
于 2013-02-08T04:57:50.703 回答
30
如果您不想将手表放在特定的控制器中,您可以在 Angular 应用程序中为整个应用程序添加手表run()
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
// handle route changes
});
});
于 2016-05-08T13:59:34.780 回答
11
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//..do something
//event.stopPropagation(); //if you don't want event to bubble up
});
于 2015-09-29T12:55:17.550 回答
2
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//if you want to interrupt going to another location.
event.preventDefault(); });
于 2017-04-03T06:25:17.970 回答
0
由于某种原因,建议的解决方案对我使用$routeChangeStart事件不起作用
如果您遇到同样的问题,请尝试:
$scope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) {
// ... you could trigger something here ...
});
在我的配置中,我使用来自节点包管理器(又名 npm)的@ui-router/angularjs(又名 angular-ui-router)
于 2021-07-14T06:19:49.377 回答
-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>
于 2019-11-01T08:14:46.897 回答