경로 변경시 이벤트를 어떻게보고 트리거합니까?
답변
참고 : 이것은 AngularJS의 레거시 버전에 대한 정답입니다. 업데이트 된 버전에 대해서는 이 질문 을 참조하십시오 .
$scope.$on('$routeChangeStart', function($event, next, current) {
// ... you could trigger something here ...
});
다음과 같은 이벤트도 사용할 수 있습니다 (콜백 함수는 다른 인수를 사용합니다).
- $ routeChangeSuccess
- $ routeChangeError
- $ routeUpdate- reloadOnSearch 특성이 false로 설정된 경우
$ route 문서를 참조하십시오 .
문서화되지 않은 다른 두 가지 이벤트가 있습니다.
- $ locationChangeStart
- $ locationChangeSuccess
$ locationChangeSuccess와 $ locationChangeStart의 차이점 은 무엇입니까?를 참조하십시오 .
답변
시계를 특정 컨트롤러에 배치하지 않으려는 경우 Angular 앱에서 전체 응용 프로그램에 대한 시계를 추가 할 수 있습니다 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>
답변
![](http://daplus.net/wp-content/uploads/2023/04/coupang_part-e1630022808943-2.png)