AngularJS thêm vào lịch sử trình duyệt mà không cần tải lại trang và không có HTML5 pushstate

Question

Tôi có trang tìm kiếm cho phép người dùng xem chi tiết các danh mục và/hoặc nhập cụm từ tìm kiếm. Tôi muốn cung cấp cho người dùng khả năng sử dụng nút quay lại để hoàn tác các tác vụ này. Sử dụng AngularJS, làm thế nào tôi có thể có trang này thêm các mục vào lịch sử trình duyệt cho mỗi hành động này. Tôi không thể sử dụng HTML5 pushstate.

Answer 1

tôi thấy tôi có thể làm điều này bằng cách thay đổi các tham số chuỗi truy vấn mà không tải lại trang bằng cách sử dụng câu trả lời về reloadOnSearch từ here:

$routeProvider 
    .when('/items', { 
    controller: 'ItemsCtrl', 
    templateUrl: '/templates/items', 
    reloadOnSearch: false 
    }, 
    ... 
); 

Và sau đó, từ câu trả lời tương tự, thiết lập các chuỗi truy vấn sử dụng:

$location.search('id', 123); 

Và cuối cùng phát hiện tuyến đường thay đổi bằng câu trả lời từ here:

$scope.$on('$routeUpdate', function(){ 
    $scope.sort = $location.search().sort; 
    $scope.order = $location.search().order; 
    $scope.offset = $location.search().offset; 
}); 

Answer 2

Bạn có thể tắt chế độ HTML5 với $locationProvider.html5Mode(false).

Sau đó, chỉ cần sử dụng url băm như <a href="#!/search">Search</a>, chúng sẽ được thêm vào lịch sử của trình duyệt.

Answer 3

Tôi không tin rằng có thể thêm mục nhập vào lịch sử trình duyệt mà không sử dụng HTML5 pushstate (ít nhất, mà không thực sự thay đổi vị trí hiện tại).

trang

Các MDN thảo luận về sự ra đời của pushstate và làm thế nào nó cho phép chức năng mới này (ám chỉ nó là không thể trước đó): https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

EDIT: Nếu lý do bạn không thể sử dụng HTML5 pushstate là vì hỗ trợ trình duyệt, xem polyfill này: https://github.com/browserstate/history.js

Answer 4

Cùng với mã số reloadOnSearch bên dưới để theo dõi sự kiện thay đổi vị trí đã hoạt động đối với tôi.

$scope.$on('$locationChangeSuccess', function() { 
     $scope.sort = $location.search().sort; 
     $scope.order = $location.search().order; 
     $scope.offset = $location.search().offset; 
    }); 

Mặc dù nó có thể giúp ích cho ai đó.