帶有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及以下版本的支持，則可以使用polyfills來幫助您自動生成範圍輸入。

其次，我使用ngStyle指令而不是手動更改樣式。這是在事件監聽器之前轉向角度思維數據綁定時所需的典型思維模式變更。

最後，我正在更多地使用ngModel指令，它將DOM中不同輸入的值綁定到數據變量。根據經驗，您應該總是嘗試將輸入值綁定到ngModel，然後在其他要以某種方式應用該值的地方使用其他指令，而不是使用ngChange來偵聽更改事件。