History inside state

Question

I`am created ionic app that has one state called master {url: /master}. There are two buttons on the state view. Each button shows hidden div with text.

I want to implement history tracking by this rules:

When user clicks on first button then url should be appended with firstOpened=true
When user clicks on second button then url should be appended with secondOpened=true
Controllers should stay the same (no re-initialization needed)
Back button of browser should undo last action, for example: If user opens first div then back button should close this div and restore url without page reload.
If history of master state is empty, then back button should restore previous state if it exsits

If i use $state.go to change url, then ionic will reinitialize state and all controllers. It looks like i move from one view to another (from one state to another), but i dont want to change the state, i want to update url and push history. I want to use same state without re-initialization.

I`am created plunker without history tracking. Can somebody help me with implementig history tracking?

script.js (see ):

angular.module('starter', ['ionic'])

.config(function($stateProvider, $urlRouterProvider) {
  var controller = 0;

  $urlRouterProvider.otherwise("/master");
  $stateProvider.state('master', { 
    url: '/master?firstOpened&secondOpened',
    views: {
      'default': {
        templateUrl: 'content.html',
        controller: function($scope, $ionicHistory, $stateParams, $state) {
            console.log('Initing controller...');
            controller = controller + 1;
            $scope.controller = controller;

            $scope.firstOpened = $stateParams.firstOpened
            $scope.secondOpened = $stateParams.secondOpened

            $scope.openFirst = function() { 
              $scope.firstOpened = true;
            };

            $scope.openSecond = function() { 
              $scope.secondOpened = true;
            };
          }
        }
      }
  })
})

RobYed RobYed · Accepted Answer · 2015-06-26T09:12:24

The point is, that you do not change the state on click. You are only changing the scope variables, but that doesn't mean any change to the URL or history.

To get history support, you need to change the state and put a ng-show on your sliders. I did it with ui-sref like this:

<ion-content>
  <h1>Controller №{{::controller}}</h1>

  <button class="button" ui-sref='master({firstOpened: true, secondOpened: false})'>Open first</button>
  <button class="button" ui-sref='master({firstOpened: false, secondOpened: true})'>Open second</button>

  <div style="background-color: #FF0000;" ng-show="{{firstOpened}}">
    <h1>Slider 1</h1>
  </div>
  <div style="background-color: #00FF00;" ng-show="{{secondOpened}}">
    <h1>Slider 2</h1>
  </div>
</ion-content>

And your controller only needs to keep track of the stateParams, like you already did:

controller: function($scope, $ionicHistory, $stateParams, $state) {
  console.log('Initing controller...');
  controller = controller + 1;

  $scope.controller = controller;

  $scope.firstOpened = $stateParams.firstOpened;
  $scope.secondOpened = $stateParams.secondOpened;
}

I've updated your plunker code here.

As you can see, I had to remove the slide animation, as it did not react properly on firstOpened and secondOpened values. But this is another issue and I am sure it's no big deal to get it to work again.

History inside state

1 Answers