代码之家 › 专栏 › 技术社区 › KingStakh

如何记住Ionic Range滑块位置$ionicPopup

ionic-popup angular-ngmodel ionic-framework

KingStakh · 技术社区 · 8 年前

我有更改页面字体大小的指令:

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

   }

1 回复 | 直到 8 年前

Community Egal 7 年前

控制器中添加了什么:

有一个 $scope.vm.fontSize 变量,并在模板中使用它,如下所示
```
template: '<text-size-slider min="10" max="18" unit="px" value="vm.fontSize" step="0"></text-size-slider>'
```
你可以阅读 Understanding Scopes 知道我为什么用 vm.fontSize 而且不是原始的 fontSize .
在控制器中添加一个监视,以获得更改值的通知。此处更改的值可以保存在某个位置,例如 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;
      }
    });
  }
}

指令中的更改内容:

value: '@' 到 value: '=' 。这将在外部作用域中使用相同的引用,然后在指令作用域中创建本地引用。 Read More .
在里面 template ng-model="value" 绑定 value (从外部范围)直接到 ng-model 价值 属性为 ng模型 自动更新,不需要。
已在上添加手表 价值 textSize 这样就没有必要了。

localStorage.fontSize $范围.vm.fontSize 并将其保存回 本地存储.fontSize 每当其值更改时。