0

我已指示更改页面上的字体大小：

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

   }
4

1 回答 1

1

控制器中添加的内容：

  1. 在控制器中有一个$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。

  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

于 2016-07-14T08:55:45.347 回答