[javascript] AngularJS에서 경로 변경을 감시하는 방법?

Program / 글쓴이

경로 변경시 이벤트를 어떻게보고 트리거합니까?

답변

참고 : 이것은 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>

스 니펫 확장

답변