angularjs - 使用 AngularJS 实现文本大小 slider

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

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

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

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