带有 AngularJS 的文本大小滑块

Question

我正在尝试更改确切文本的字体和字体大小，但我得到了更改字体部分和更改大小但是两个不同的文本。如何将这两个函数应用于文本。

这是我的html

<div ng-controller="StylesCtrl">
                    <select ng-model="font" ng-options="font as font.label for font in fonts" ng-change="change(font)"></select>
                    <h3><font face="{{selectedFont}}">Text Is</font></h3>
                </div>
                <text-size-slider min="12" max="24" unit="px" value="18"></text-size-slider>
                <div>Font Size Slider</div>

这是我的脚本文件

(function () {
angular.module('appBuilderApp').controller("StylesCtrl", function ($scope) {
    $scope.fonts = [
       {
          value: 'Arial',
          label: 'Arial'
        },
        {
          value: 'Tahoma',
          label: 'Tahoma'
        }
    ];
    $scope.selectedFont = '';
    $scope.change = function (option) {
       $scope.selectedFont = option.value;
    }
});

angular.module('appBuilderApp').directive('textSizeSlider', ['$document', function ($document) {
    return {
      restrict: 'E',
      template: '<div class="text-size-slider"><span class="small-letter" ng-style="{ fontSize: min + unit }">A</span> <input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" /> <span class="big-letter" ng-style="{ fontSize: max + unit }">A</span></div>',
      scope: {
        min: '@',
        max: '@',
        unit: '@',
        value: '@',
        step: '@'
      },
      link: function (scope, element, attr) {
        scope.textSize = scope.value;
        scope.$watch('textSize', function (size) {
          $document[0].body.style.fontSize = size + scope.unit;
        });
      }
    }
  }]);
})();

请帮我把这两个功能应用到一个文本上。

Answer 1

为了让它工作，我稍微简化了代码并尝试更多地使用内置 Angular 指令以及一些 HTML5 功能。这是您的代码的工作版本。

HTML:

<div ng-controller="StylesCtrl">
    <select ng-options="font for font in fonts" ng-model="text.font"></select>
    <h3 ng-style="{'font-family': text.font, 'font-size': text.size + 'px'}">Text Is</h3>
    <input min="12" max="24" ng-model="text.size" type="range">
    <div>Font Size Slider</div>
</div>

JS:

(function () {
    angular.module("appBuilerApp", [])
    .controller("StylesCtrl", function ($scope) {
        $scope.fonts = [
            "Arial",
            "Tahoma"
        ];

        $scope.text = {
            font: "Arial",
            size: 18
        };
    });
})()

这里的主要变化是我使用范围输入而不是滑块的自定义指令。如果您需要对 IE9 及以下版本的支持，可以使用 polyfill 来帮助您自动生成范围输入。

其次，我使用 ngStyle 指令而不是手动更改样式。这是转向 Angular 时所需的典型思维方式改变 - 在事件侦听器之前考虑数据绑定。

最后，我更多地使用 ngModel 指令，它将 DOM 中不同输入的值绑定到数据变量。根据经验，您应该始终尝试将输入值与 ngModel 绑定，然后在您希望以某种方式应用该值的其他地方使用其他指令，而不是使用 ngChange 来监听更改事件。

带有 AngularJS 的文本大小滑块

Text Size Slider with AngularJS

fonts

scope

font-size

angularjs