event.preventDefault() với Angularjs và UIRouter xóa lịch sử trình duyệt

Question

Tôi đang hiển thị lời nhắc Javascript Confirm khi người dùng nhấp vào trình duyệt Back bằng cách xem sự kiện $stateChangeStart. Hãy xem xét những điều sau đây:

Người dùng điều hướng từ trang 1, 2, sau đó đến trang 3. Trên trang 3, người dùng nhấp vào nút Back, họ sẽ nhận được một hộp Xác nhận. Người dùng nhấp vào nút Cancel, event.preventDefault() được thực thi và người dùng vẫn ở trên cùng một trang. Sau đó, nếu người dùng nhấp lại vào Back và chọn OK lần thứ hai, người dùng sẽ được đưa trở lại trang 1. Điều gì đã xảy ra với trang 2? event.preventDefault() có xóa lịch sử cuối cùng không? Làm cách nào để ngăn trình duyệt thoát khỏi trang trước?

$rootScope.$on('$stateChangeStart', 
    function (event, toState, toParams, fromState, fromParams) { 
     var retVal = confirm("You have unsaved changes. If you leave the page, these changes will be lost."); 
     if (retVal == false) { 
      // user wants to cancel navigating back. 
      event.preventDefault();   
     } 
    }); 

Answer 1

Nếu bạn muốn giữ lại lịch sử trong khi ngăn chặn lại nút bấm, bạn phải làm điều đó xem $ locationChangeStart sự kiện thay vì $ stateChangeStart.

Điều này là do $ stateChangeStart trái ngược với $ locationChangeStart được mở rộng sau khi quá trình chuyển đổi đã được thực thi và lịch sử trình duyệt đã được cập nhật.

Vì vậy, nó nên đi như thế này:

$rootScope.$on('$locationChangeStart', function(event, next) { 
    var retVal = confirm("You have unsaved changes. If you leave the page, these changes will be lost."); 
    if (retVal == false) { 
     // user wants to cancel navigating back. 
     event.preventDefault();   
    } 
});