返回时保持所有状态

Keep all states when going back

本文关键字：状态 返回      更新时间：2023-09-26

在我的Angular应用程序中有多个页面，用户可以对其进行相当大的更改，例如打开标签和药丸、情态动词等。比如说，他们打开一个模态，然后点击这个模态中的一个链接，这个链接会把他们带到另一个页面。在另一个页面，当他们回到他们的浏览器历史记录，我希望他们看到第一页的方式，他们离开它，即与模态打开，而不是它的样子，当你重新加载它。

我在Angular 1.4.3中使用ui-router。

到目前为止，我已经查看了以下链接:

  • https://github.com/angular-ui/ui-router/issues/63
  • https://github.com/angular-ui/ui-router/issues/562

…但它们似乎不是我所需要的。我甚至不知道怎么用谷歌搜索。

另一个例子是，当用户在搜索栏中输入一些东西，然后点击一个结果，就会进入一个新的页面。当他们返回时，他们将不得不再次进入搜索，这不是最好的体验。

使用服务存储页面状态

与其将页面状态和用户输入存储在$scope上，不如将其存储在与$scope一起注入到页面控制器的持久服务上。

在$scope上保存对业务的引用:

myApp.service('MyPageStateService', function() {
    this.someProperty = 'some initial state';
});
myApp.controller('MyPageController', function($scope, MyPageStateService) {
    $scope.state = MyPageStateService;
});

和从页面模板访问存储在持久状态服务上的数据:

<div ng-controller="MyPageController">
    <p>My page state is {{state.someProperty}}</p>
</div>

当在应用程序中导航回此页面时，控制器将获得一个新的$scope，但MyPageStateService的实例相同。

您可以看看粘性状态。它们不局限于向前/向后导航，这给了它们一些一致性。

如果这种行为是不可取的任何地方，但向前/向后，我想它可以通过在$stateChangeStart上做$stickyState.reset('…')来完成，除了相邻的状态。

相关文章：