หนึ่งจะเฝ้าดู / ทริกเกอร์เหตุการณ์ในการเปลี่ยนเส้นทางได้อย่างไร
หนึ่งจะเฝ้าดู / ทริกเกอร์เหตุการณ์ในการเปลี่ยนเส้นทางได้อย่างไร
คำตอบ:
หมายเหตุ : นี่เป็นคำตอบที่ถูกต้องสำหรับ AngularJS เวอร์ชันดั้งเดิม ดูคำถามนี้สำหรับรุ่นที่ปรับปรุงแล้ว
$scope.$on('$routeChangeStart', function($event, next, current) {
// ... you could trigger something here ...
});
นอกจากนี้ยังมีเหตุการณ์ต่อไปนี้ (ฟังก์ชันการเรียกกลับใช้อาร์กิวเมนต์ที่ต่างกัน):
ดูเอกสาร$ เส้นทาง
มีสองเหตุการณ์ที่ไม่มีเอกสารอื่น ๆ:
ดูความแตกต่างระหว่าง $ locationChangeSuccess และ $ locationChangeStart คืออะไร
$rootScope.$on("$routeChangeStart", function (event, next, current) {แล้วตอนนี้
หากคุณไม่ต้องการวางนาฬิกาไว้ในตัวควบคุมที่เฉพาะเจาะจงคุณสามารถเพิ่มนาฬิกาสำหรับการใช้งานทั้งหมดในแอพเชิงมุม run()
var myApp = angular.module('myApp', []);
myApp.run(function($rootScope) {
$rootScope.$on("$locationChangeStart", function(event, next, current) {
// handle route changes
});
});
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//..do something
//event.stopPropagation(); //if you don't want event to bubble up
});
$rootScope.$on( "$routeChangeStart", function(event, next, current) {
//if you want to interrupt going to another location.
event.preventDefault(); });
นี่สำหรับผู้เริ่มต้นทั้งหมด ... อย่างฉัน:
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>