6

我有一个搜索页面，允许用户向下钻取类别和/或输入搜索词。我想让用户能够使用后退按钮撤消这些操作。使用 AngularJS，我怎样才能让这个页面为这些操作中的每一个添加条目到浏览器历史记录中。我不能使用 HTML5 推送状态。

4

4 回答 4

14

我发现我可以通过使用此处关于reloadOnSearch的答案更改查询字符串参数而无需重新加载页面来做到这一点：

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

然后，从同一个答案中，使用以下方法设置查询字符串：

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

最后使用此处的答案检测路线变化：

$scope.$on('$routeUpdate', function(){
  $scope.sort = $location.search().sort;
  $scope.order = $location.search().order;
  $scope.offset = $location.search().offset;
});
于 2013-09-26T22:16:23.980 回答
5

您可以使用 关闭 HTML5 模式$locationProvider.html5Mode(false)。

然后只需使用 hashbang url <a href="#!/search">Search</a>，它们将被添加到浏览器的历史记录中。

于 2013-09-26T14:47:03.647 回答
2

我不相信不使用 HTML5 pushstate 就可以将条目添加到浏览器历史记录中（至少，不实际更改当前位置）。

MDN 页面讨论了 pushstate 的引入以及它如何启用这个新功能（暗示以前不可能）： https ://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history

编辑：如果您不能使用 HTML5 pushstate 的原因是因为浏览器支持，请参阅这个 polyfill： https ://github.com/browserstate/history.js

于 2013-09-26T14:50:41.563 回答
1

连同下面的reloadOnSearch代码来跟踪位置更改事件对我有用。 

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

虽然它可能对某人有所帮助。

于 2017-04-07T17:23:05.753 回答