Angular $location.state() 与 history.pushState 行为

Question

我正在尝试构建一个概念证明单页应用程序，该应用程序使用历史 API 来存储视图的状态，这样当用户使用浏览器的后退和前进按钮导航时，将显示以前的状态。

这个简单的例子是一系列页面链接和一些显示的值，以显示状态的状态（没有双关语）。

这一切都在一个功能性的plnkr 中

基本观点：

<div ng-app="testApp">
    <div ng-controller="testCtrl">
        <h1>State Data: {{data.displayText}}</h1>
        <h2>Current Page: {{data.currentPage}}</h2>
        <a ng-click="goToPage(page)" ng-repeat="page in pages" class="page">{{page}}</a>
    </div>
</div>

应用程序/控制器：

var testApp = angular.module('testApp', ['ngRoute'])
  .config(function($locationProvider) {
        $locationProvider.html5Mode(true);
  });

testApp.controller('testCtrl', ['$scope', '$location', function ($scope, $location) {

    // Hardcode some pages
    $scope.pages = [1, 2, 3, 4, 5, 6, 7, 8, 9];

   // Set initial data
    $scope.data = {
        currentPage: 1,
        displayText: "This is the initial state"
    };

    // Set initial data in state
    $location.state($scope.data);

    // Watch for location changes so we can apply state accordingly
    $scope.$on('$locationChangeSuccess', function (a, newUrl, oldUrl) {
        $scope.data = $location.state();
    });

    // Move between pages
    $scope.goToPage = function (page) {

        $scope.data.currentPage = page;
        $scope.data.displayText = "This is page " + page;

        $location.search("page", page);
        $location.state($scope.data);

        //history.pushState($scope.data, null, '/ThisPage?page=' + page);
    };
}]);

您会注意到注释的 history.pushState() 行。 使用该行而不是上面的 $location.search() 和 $location.state() 行实际上可以按我预期的方式工作和执行，但我希望使用正确的角度方式使其工作。

编辑：要清楚，我不是在问我是否应该以有角度的方式这样做。 我在问什么是让这个工作的正确角度方式。 在 $scope.goToPage() 中对 $location 的两次调用不起作用，但对 history.pushState （注释行）的调用确实起作用。 我显然错过了如何用纯角度实现这一点的东西，这就是我需要帮助的地方。 干杯!

Answer 1

根据官方网站上的 AngularJS 文档，使用 $location.search 和 state 而不是 history 绝对没问题。

https://docs.angularjs.org/api/ng/service/ $location

如果您使用的是纯 AngularJS，则始终建议您通过 Angular 方式

history.pushState不是 Angular 代码，它只是一种操作浏览器历史记录的方式，查看链接以获取更多详细信息

https://developer.mozilla.org/en-US/docs/Web/API/History_API

所以我总是希望你使用$location.search 和 $location.state而不是 history.pushState

Answer 2

这是我自己发现的解决方法。

无论出于何种原因，当尝试从 goToPage() 方法中设置 $location.state() 时，状态不会被设置。 Angular 将更新 url，但状态数据将为空。

我发现你可以使用 $location.search() 或 $location.path() 来修改 url，然后使用 $location.absUrl() 直接调用 history.pushState()。

这是有益的原因是您不必搞乱字符串解析来获取您想要的 URL。 Angular 会处理这个问题，我们只需获取要与 pushState() 一起使用的值。

我不得不认为在 Angular 中有一种方法可以做到这一点，但我还没有找到。

$scope.goToPage = function (page) {
   $scope.data.currentPage = page;
   $scope.data.displayText = "This is page " + page;

   $location.search("page", page);
   history.pushState($scope.data, null, $location.absUrl());
};

Answer 3

每次按下按钮后，您的历史状态对象将设置为 NULL。 在代码中注释下一行：

// $scope.data = $location.state();

或将您的事件注释掉，因为在这种情况下是不必要的

/*
    Watch for location changes so we can apply state accordingly
    $scope.$on('$locationChangeSuccess', function (a, newUrl, oldUrl) {
        $scope.data = $location.state();
    });
*/

我认为，在那之后，您的代码将像魅力一样工作。