文本大小滑块，带有特定元素的AngularJS

我有范围滑块的创建指令，现在它改变了主体字体，但我想为特定的元素工作，你能给我代码吗

angular.module('textSizeSlider', [])
       .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;
                });
              }
            }
          }]);

angular.module（'textSizeSlider'，[]）
.directive（'textSizeSlider'，['$document'，函数（$document）{
返回{
限制：'E'，
模板：“A”，
范围：{
最小：“@”，
马克斯：“@”，
单位：‘@’，
值：'@'，
步骤：“@”
},
链接：功能（范围、元素、属性）{
scope.textSize=scope.value；
范围：$watch（'textSize'，函数（大小）{
$document[0].body.style.fontSize=size+scope.unit；
});
}
}
}]);

在指令中添加目标，使其动态化

将id=“*”添加到目标以使用JavaScript DOM检测它

Html

<header ng-app="textSizeSlider">
    <!-- Custom AngularJS Directive -->
    <text-size-slider min="12" max="24" unit="px" value="18" step="0" target="myHeaderTitle">
        <!-- END of Custom AngularJS Directive -->
    </text-size-slider>
</header>

<section>
    <h1 id="myHeaderTitle">Text Size Slider</h1>
    <h3>AngularJS, HTML5 and CSS3</h3>
    <article>
        <p>
            <strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </article>
</section>

定义目标

<h1 id="myHeaderTitle">Text Size Slider</h1>
<h3 id="myHeaderTitle2">AngularJS, HTML5 and CSS3</h3>

---

你想处理依赖于缩放父项的子字体大小吗？@Maher检查此链接我只想更改标题字体大小有人能给我答案吗？？？你想用jquery还是jquery light制作？@Maher我只想用angularjs制作我已经添加了你的代码，但还没有工作，请检查codepen目标Id不在类不使用多个元素检查下面的codepen链接也给出控制台错误，因为您通过重复Id来执行此操作，并且Id是唯一的，在您的问题中，您没有提到重复元素，我现在在移动，我将尽快回答您

target="myHeaderTitle,myHeaderTitle2"

<h1 id="myHeaderTitle">Text Size Slider</h1>
<h3 id="myHeaderTitle2">AngularJS, HTML5 and CSS3</h3>

var targets = scope.target.split(",");

scope.$watch('textSize', function (size) {
    for (key in targets) {
        var target = targets[key];
        document.getElementById(target).style.fontSize = size + scope.unit;
    }
    scope.updatepointer();
});