AngularJS에서 앞뒤 탐색을 비활성화하는 방법

Question

Angular.JS에 내장 된 라우터를 사용하여 컨트롤/템플릿 쌍 사이를 전환합니다. 페이지를 전환하는 동안 주소 표시 줄이 그에 따라 변경됩니다. 문서를 확인한 결과, AngularJs가 $ 위치 서비스를 브라우저 주소 표시 줄과 동기화했다고합니다.

내 문제는 내 페이지에서 앞뒤로 사용하지 못하게하고 싶습니다. 앞뒤로 클릭하면 데이터를 가져 와서 페이지를 채울 수 없기 때문입니다. 이전에는 JQuery 모바일에서 주소 표시 줄의 URL 변경을 비활성화했습니다. 이렇게하면, 기본적으로 앞뒤로 사용할 수 없게되었습니다. 그러나 AngularJS와 함께 할 수있는 방법이 있습니까?

Answer 1

아니요. 웹 앱 사용자가 앞뒤 단추를 사용하여 이동하는 것이 자연스러운 현상입니다. 순수 jQuery 앱에서 사람들은 다양한 jQuery 플러그인을 사용하여 브라우저 히스토리를 지원한다. 기본적으로 jQuery는 브라우저 기록을 지원하기 위해 아무 것도하지 않기 때문이다. 그러므로 angularJS는 브라우저의 역사를 그대로 유지합니다.

사용자가 뒤로 및 앞으로 단추를 사용하여 탐색 할 때 URL에 매개 변수를 추가하여 데이터를 채울 수 있습니다. 탐색을위한 뒤로 및 앞으로 단추를 지원하는 더 좋은 방법은 없습니다.

Answer 2

본인이 직접 문제를 파악했습니다. 앞뒤로 트리거 된 페이지 전환을 중지하려면 $ locationChangeStart 이벤트를 수신하는 방법이 있습니다. 앞뒤 버튼으로 트리거되었다고 말할 수 있다면 event.preventDefault();를 호출하여 페이지 변경을 비활성화하십시오.

페이지 변경이 내역 버튼 또는 논리에 의해 트리거되는지 여부를 확인하는 방법은 내 기본 서비스에서 페이지 변경을 제어하는 ​​논리가 있기 때문입니다. 그러므로, 그것은 나를 위해 문제가되지 않습니다.

버튼을 다시 해제하려면 :

Answer 3

UI 라우터 모듈을 사용

$rootScope.$on('$stateChangeStart', 
function(event, toState, toParams, fromState, fromParams){ 
    event.preventDefault(); 
    window.history.forward(); 
}); 

Answer 4

var allowNav = false; 
var checkNav = false; 

$rootScope.$on('$stateChangeSuccess', function (event, toState, toStateParams, fromState, fromStateParams) { 

      allowNav = checkNav; 
      checkNav = true; 

     }); 

$rootScope.$on('$locationChangeStart', function (event, next, current) { 
      // Prevent the browser default action (Going back) 
      if (checkNav) { 
       if (!allowNav) { 
        event.preventDefault(); 
       } 
       else { 
        allowNav = false; 
       } 
      } 
     });