Question

我的Angular应用程序中有多个页面，用户可以更改，即打开标签和药片，模态等。例如，他们打开一个模态然后单击该模式中的一个链接他们到另一页。在另一页上，当他们回到他们的浏览器历史记录中时，我希望他们按照他们离开它的方式查看第一页，即打开模态，而不是重新加载它时的外观。

我正在使用带有Angular 1.4.3的ui-router。

到目前为止，我已查看以下链接：

......但它们似乎并不是我所需要的。我甚至不确定如何谷歌这个。

另一个例子是用户在搜索栏中输入内容，然后点击导致新页面的结果。当他们回去时，他们将不得不再次进入搜索，这不是最好的体验。

Answer 1

使用服务存储页面状态

不是将页面状态和用户输入存储在$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的实例相同。

Answer 2

您可以查看sticky states。它们不仅限于前进/后退导航，这为它们提供了一些一致性。

如果除了前进/后退之外的任何地方都不希望出现这种行为，我想可以通过$stateChangeStart对development: access_key_id: AWS_ACCESS_KEY_ID secret_access_key: AWS_SECRET_KEY_ID production: access_key_id: AWS_ACCESS_KEY_ID secret_access_key: AWS_SECRET_KEY_ID除了相邻状态之外的所有内容进行操作。

回去时保持所有状态

2 个答案:

使用服务存储页面状态