How to remember Ionic Range slider position $ionicPopup

Question

I have directive to change font size on page:

.directive('textSizeSlider', ['$document', function ($document) {
    return {
      restrict: 'E',
      template: '<div class="range"><i class="icon" ng-style="{ fontSize: min + unit }">A-</i><input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" value="{{ value }}" /><i class="icon" ng-style="{ fontSize: max + unit }">A+</i></div>',
      scope: {
        min: '@',
        max: '@',
        unit: '@',
        value: '@',
        step: '@'
      },
      link: function (scope, element, attr) {
        scope.textSize = scope.value;
        scope.$watch('textSize', function (size) {
            var x = document.getElementsByTagName("P");
            var i;
            for (i = 0; i < x.length; i++) {
            x[i].style.fontSize = size + scope.unit;
            }
        });
      }
    }
  }]);

On my page by button click open Popup with range to decrease/increase font size. But every time when I open Popup range slider have default position sets in value in my controller. How to save changed value for Range? This is my function in controller:

  $scope.fontAdjust = function() {

    var alertPopup = $ionicPopup.alert({
    title: 'Font adjustment',
    template: '<text-size-slider min="10" max="18" unit="px" value="14" step="0"></text-size-slider>'
    })

   }

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

What's added in controller:

Have a $scope.vm.fontSize variable in the controller and use it in your template like this
```
template: '<text-size-slider min="10" max="18" unit="px" value="vm.fontSize" step="0"></text-size-slider>'
```
You may read Understanding Scopes to know why I have used vm.fontSize and not primitive fontSize.
Add a watch in controller to be notified of the changed value. Here the changed value can be saved somewhere e.g. in localStorage.
```
$scope.$watch('vm.fontSize', function (newValue, oldValue) {
  console.log(newValue);
  localStorage.fontSize = newValue;
});
```

and then in your directive use the following code:

return {
  restrict: 'E',
  template: '<div class="range"><i class="icon" ng-style="{ fontSize: min + unit }">A-</i><input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="value" /><i class="icon" ng-style="{ fontSize: max + unit }">A+</i></div>',
  scope: {
    min: '@',
    max: '@',
    unit: '@',
    value: '=',
    step: '@'
  },
  link: function (scope, element, attr) {
    scope.textSize = scope.value; // This is not required
    scope.$watch('value', function (size) {
      var x = document.getElementsByTagName("P");
      var i;
      for (i = 0; i < x.length; i++) {
        x[i].style.fontSize = size + scope.unit;
      }
    });
  }
}

What's changed in directive:

value: '@' to value: '='. This to use the same reference in outer scope then to create a local one in the directive scope. Read More.
In template property, added ng-model="value" to bind the value (from outer scope) directly to the ng-model and removed the value attribute as ng-model updates it automatically and is unnecessary.
Added watch on the value directly than on textSize which makes it unnecessary.

When controller is loaded, you may read localStorage.fontSize and assign it to $scope.vm.fontSize and save it back in localStorage.fontSize whenever its value is changed.

Thank you for answer. But you missed font-size value at start and I try this example but it is don't work ((( — KingStakh, Jul 14 '16 at 13:03
In your controller, you may try this `$scope.vm = {}; $scope.vm.fontSize = 12; if(localStorage.fontSize) { $scope.vm.fontSize = parseInt(localStorage.fontSize); }`. Does that help? — Ritesh Jagga, Jul 14 '16 at 13:08
[Please check this](http://play.ionic.io/app/ac1df1096ecb) and let me know. I am not using Cancel and OK button but using $watch to save so you may have popup with OK button only. — Ritesh Jagga, Jul 15 '16 at 14:39
Thank you! Now looks great, but have new issue. When I change font size on page close popup and open again all is good, but when I click back button to posts list and back again font on page have default css style and when open popup slider have position previous visit. And now have question how reset cache when back button or history button is pressed or no clear cache but when visit page again text cache previous size ))) — KingStakh, Jul 15 '16 at 16:29
Please see updated code I used this in the html code `` which reads the `vm.fontSize` and apply an inline style to the `ion-pane's` element and due to CSS inheritance this font size will be set to all elements (wherever applicable like `div`, `p`, `anchor`, `span` elements). I've added a `div` to demonstrate. Since you wanted to increase font size of only paragraphs then you might need to put this `ng-style` code to each paragraph element. — Ritesh Jagga, Jul 18 '16 at 08:03

How to remember Ionic Range slider position $ionicPopup

1 Answers1