Как запомнить положение ползунка Ionic Range $ionicPopup

У меня есть директива изменить размер шрифта на странице:

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

На моей странице по кнопке открыть всплывающее окно с диапазоном для уменьшения/увеличения размера шрифта. Но каждый раз, когда я открываю ползунок диапазона всплывающих окон, в моем контроллере устанавливается значение по умолчанию. Как сохранить измененное значение диапазона? Это моя функция в контроллере:

  $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>'
    })

   }

person KingStakh    schedule 11.07.2016    source источник


Ответы (1)


Что добавлено в контроллер:

  1. Имейте переменную $scope.vm.fontSize в контроллере и используйте ее в своем шаблоне следующим образом.

    template: '<text-size-slider min="10" max="18" unit="px" value="vm.fontSize" step="0"></text-size-slider>'
    

    Чтобы узнать, почему я использовал vm.fontSize, а не примитив fontSize.

  2. Добавьте часы в контроллер, чтобы получать уведомления об изменении значения. Здесь измененное значение можно сохранить где-нибудь, например. в localStorage.

    $scope.$watch('vm.fontSize', function (newValue, oldValue) {
      console.log(newValue);
      localStorage.fontSize = newValue;
    });
    

а затем в вашей директиве используйте следующий код:

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

Что изменилось в директиве:

  1. с value: '@' по value: '='. Это для использования той же ссылки во внешней области, а затем для создания локальной в области директивы. Подробнее....
  2. В свойстве template добавлено ng-model="value" для привязки value (из внешней области) непосредственно к ng-model и удален атрибут value, так как ng-model обновляет его автоматически и не нужен.
  3. Добавлены часы на value напрямую, чем на textSize, что делает их ненужными.

Когда контроллер загружен, вы можете прочитать localStorage.fontSize и присвоить его $scope.vm.fontSize и сохранить обратно в localStorage.fontSize всякий раз, когда его значение изменяется.

person Ritesh Jagga    schedule 14.07.2016
comment
Спасибо за ответ. Но вы пропустили значение размера шрифта при запуске, и я пробую этот пример, но он не работает ((( - person KingStakh; 14.07.2016
comment
В вашем контроллере вы можете попробовать это $scope.vm = {}; $scope.vm.fontSize = 12; if(localStorage.fontSize) { $scope.vm.fontSize = parseInt(localStorage.fontSize); }. Это помогает? - person Ritesh Jagga; 14.07.2016
comment
Не надо((( Может можно Codepen или IonicPlay пример? - person KingStakh; 14.07.2016
comment
Проверьте это и дайте мне знать. Я не использую кнопки «Отмена» и «ОК», но использую $watch для сохранения, поэтому у вас может быть всплывающее окно только с кнопкой «ОК». - person Ritesh Jagga; 15.07.2016
comment
Благодарю вас! Теперь выглядит отлично, но есть новая проблема. Когда я меняю размер шрифта на странице, закрываю всплывающее окно и снова открываю, все хорошо, но когда я нажимаю кнопку «Назад», чтобы просмотреть список сообщений и снова возвращаюсь, шрифт на странице имеет стиль CSS по умолчанию, а когда открытый слайдер всплывающего окна имеет позицию предыдущего посещения. И теперь есть вопрос, как сбросить кеш при нажатии кнопки «Назад» или кнопки истории или нет очистки кеша, но при повторном посещении страницы текстовый кеш предыдущего размера ))) - person KingStakh; 15.07.2016
comment
См. обновленный код, который я использовал в html-коде <ion-pane ng-controller="MyController" ng-style="{'fontSize': vm.fontSize + 'px'}">, который считывает vm.fontSize и применяет встроенный стиль к элементу ion-pane's, и из-за наследования CSS этот размер шрифта будет установлен для всех элементов (где это применимо, например div, p, anchor, span элементы). Я добавил div для демонстрации. Поскольку вы хотели увеличить размер шрифта только абзацев, вам может понадобиться поместить этот код ng-style в каждый элемент абзаца. - person Ritesh Jagga; 18.07.2016