Question

我使用angular来渲染这样的视图：

＆＃13;

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;
    };
  
}]);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我希望按下浏览器后退和按钮时此按钮有效。我尝试改变哈希，但它没有奏效。

Answer 1

您似乎需要将范围的值存储为cookie。

可以如下所示完成。

案例1：Cookie 更多$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

Answer 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变量。

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

2 个答案: