单击浏览器后退按钮时恢复范围答案

【问题标题】：Restore scope when browser back button is clicked单击浏览器后退按钮时恢复范围
【发布时间】：2016-09-20 07:07:28
【问题描述】：

我正在使用 Angular 来渲染这样的视图：

var app = angular.module("demo", []);



app.controller('demoCtrl', ["$scope",function ($scope) {
  
  $scope.current_step = 1;
  
  $scope.step_two = function(){
        $scope.current_step = 2;
    };
  
   $scope.step_one = function(){
        $scope.current_step = 1;
    };
  
}]);

.button {
    background: #fb6648;
    color: #fff;
    display: inline-block;
    padding: 18px 0px;
    max-width: 150px;
    width: 100%;
    text-align: center;
    border-radius: 3px;
    font-size: 18px;
    transition: all 0.5s;
    outline: none;
    border: none;
    -webkit-appearance: none!important;
}

.area {
    width: 100px;
    height: 100px;
    display: block;
    border: 1px solid;
    text-align: center;
    margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="demo">

		<div ng-controller="demoCtrl" id="demoCtrl">
		    
		  	<div ng-if="current_step==1">
		    	<span class="area" >Step One</span>
		      <a class="button" ng-click="step_two()" >go to Step Two</a>
		    </div>
		  
		  	<div ng-if="current_step==2">
		    	<span class="area">Step Two</span>
		     	<a class="button" ng-click="step_one()" >Back to Step One</a>
		    </div>
		  
		  
		</div>
 </body>

我希望此按钮在按下浏览器后退和前进按钮时工作。我尝试更改哈希，但没有成功。

【问题讨论】：

你需要使用角度路由器
是的，我知道，但我已经构建了没有角路由器的项目。不想为这个小功能包含它。
后退或前进时页面丢失
@azad 没有任何办法，所以我可以更改 url 中的哈希或操纵浏览器历史记录，以便浏览器恢复以前的状态或至少触发一个事件，以便我可以自己恢复范围。
@GauravSrivastava 如果你想操纵浏览器历史的状态，使用可以看这个github.com/browserstate/history.js johan.driessen.se/posts/…

标签： angularjs

【解决方案1】：

看来你需要将scope的值存储为cookie。

如下图所示。

案例 1：Cookies 更多 $cookies

提供对浏览器 cookie 的读/写访问权限。

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);

案例 2：ngStorage 更多 ngStorage

一个 AngularJS 模块，使 Web 存储以 Angular 方式工作。

var app = angular.module('MyApp', ["ngStorage"])
    app.controller('MyController', function ($scope, $localStorage, $sessionStorage, $window) {
        $scope.Save = function () {
            $localStorage.LocalMessage = "LocalStorage: My name is XXX.";
            $sessionStorage.SessionMessage = "SessionStorage: My name is XXX.";
        }
        $scope.Get = function () {
            $window.alert($localStorage.LocalMessage + "\n" + $sessionStorage.SessionMessage);
        }
});

更多帮助

how-to-use-ngstorage-in-angularjs

【讨论】：

如何在浏览器后退按钮按下时恢复 cookie 的值？
你可以检查条件，如果cookie被选中不再重置它，这样你就可以做到。
这会是最好的解决方案吗？
@GauravSrivastava 这取决于您的要求，您需要选择最适合您的选项/解决方案。如果您有多个页面（视图）的步骤，您可以为每个页面定义多个不同的控制器并使用 ngStorage 来跟踪范围的值。一般来说，如果我们需要在 cookie 中存储任何值或通过浏览器的后退/前进按钮对其进行跟踪，我们在 jQuery 中使用 localstorage。
您可以使用 history api 的推送状态方法将用户导航到新状态。稍后当用户点击返回按钮历史api的onpopstate事件会被调用，这里可以使用cookie或者本地存储来重置scope值。

【解决方案2】：

使用$localStorage，

    angular.module('myApp')
         .controller('MyCtrl',function($scope,$localStorage){

            window.onhashchange = function() {

                console.log("triggered");

                if($localStorage.user != null){

                    //get value from $localStorage and set it to scope variable 
                    $scope.user = JSON.parse($localStorage.user);
                }
            }
    });

在其他控制器中，您需要将$localStorage.user 值设置为

$localStorage.user = JSON.stringify({'name':'Geo','age':22});

如果它不为 null，您可以将其重新分配给 $scope.user 变量。

【讨论】：

它将不起作用，因为如果我更改哈希，当我从代码更改哈希或按下后退按钮时，它将触发哈希更改事件。
根据你的 hashchange 条件处理它。这个答案将恢复范围值。
不要认为在实际项目中我只有两个 $scope.current_steps 变量，我可以从 if/else 中处理。