Restore scope when browser back button is clicked

Question

I am using angular for rendering view like this:

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>

i want this button to work when browser back and froward button are pressed. i tried changing hash but it didn't worked.

yeah i know but i have already build this project without angular router. don't want to include it for this small functionality. — Gaurav Srivastava, Sep 20 '16 at 07:16
@azad isn't there any way so i could change the hash in url or manipulate browser history so that browser restores the previous state or at least fires an event so that i can restore the scope myself. — Gaurav Srivastava, Sep 20 '16 at 07:26
@GauravSrivastava If you want to manipulate the state of browser history, use can see this https://github.com/browserstate/history.js http://johan.driessen.se/posts/Manipulating-history-with-the-HTML5-History-API-and-AngularJS — Mohit Tanwani, Sep 20 '16 at 08:05
basically i have a variable in scope which decides what div needs to be shown. you can see the code i have provided in question. — Gaurav Srivastava, Sep 20 '16 at 08:16
@GauravSrivastava what you've tried so far now ? And what problem still you're getting ? — Mohit Tanwani, Sep 20 '16 at 11:51
@Loading.. i solved the problem by setting $location.hash and then tracking hash change event. — Gaurav Srivastava, Sep 20 '16 at 11:56

score 2 · Answer 1 · edited May 23 '17 at 12:08

2

It seems that you need to store the value of scope as cookie.

That can be done as shown below.

Case-1: Cookies More $cookies

Provides read/write access to browser's cookies.

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

Case-2: ngStorage More ngStorage

An AngularJS module that makes Web Storage working in the Angular Way.

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

More help

how-to-use-ngstorage-in-angularjs

edited May 23 '17 at 12:08

Community

1
1

answered Sep 20 '16 at 07:33

Mohit Tanwani

6,608
2
14
32

how i am gonna restore the value of cookie on browser back button press? – Gaurav Srivastava Sep 20 '16 at 07:36
You can check the condition if the cookie is checked not reset it again, that way you can do that. – Mohit Tanwani Sep 20 '16 at 07:38
would it be the best solution? – Gaurav Srivastava Sep 20 '16 at 07:41
1

@GauravSrivastava It depends on your requirement, you need to choose that which option / solution is best for you. If you've multiple pages (view) for steps, you can defined multiple different controllers for each and use ngStorage to keep track value of scope. Generally if we need to store any value in cookie or track it via browser back / forward button, we use localstorage in jQuery. – Mohit Tanwani Sep 20 '16 at 07:45
You can navigate the user to a new state using history api's push state method. Later when the user clicks on back button history api's onpopstate event will be called, here you can use cookie or local storage to reset the scope value. – Jigar Sep 20 '16 at 07:45
@GauravSrivastava I've updated my answer. Can you show me your view and how you're planning to render a different views from a single controller ? – Mohit Tanwani Sep 20 '16 at 08:11

Sharan De Silva · Answer 2 · 2016-09-20T08:03:54.300

-1

Use $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);
                }
            }
    });

In someother controller you need to set $localStorage.user value as

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

If it is not null you can reassign it to the $scope.user variable.

edited Sep 20 '16 at 08:03

answered Sep 20 '16 at 07:45

Sharan De Silva

598
1
8
27

it will not work because if i change the hash it will fire the hash change event when i change the hash from code or when back button is pressed. – Gaurav Srivastava Sep 20 '16 at 08:00
Handle it depends on your hashchange condition.. This answer will do restoring the scope value. – Sharan De Silva Sep 20 '16 at 08:10
don't think that in real project i have just two $scope.current_steps variable which i can handle from from if/else. – Gaurav Srivastava Sep 20 '16 at 08:20

Restore scope when browser back button is clicked

2 Answers2