Angularjs指令明確<div>

Question

我剛開始學習angularjs。 我找到了更改字體大小的腳本，但該腳本更改了頁面上的所有標記<p> 。 如何僅在<div class="items-list">更改<p> <div class="items-list"> ？

myApp.directive('textSizeSlider', ['$document', function ($document) {
return {
    restrict: 'E',
    template: '<div class="text-size-slider"><span>Увеличение шрифта</span><input type="range" min="{{ min }}" max="{{ max }}" step="{{ step || 0 }}" ng-model="textSize" class="slider" value="{{ value }}" /></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;
        });
    }
}

}]）;

  <text-size-slider min="12" max="24" unit="px" value="18" step="0">

Answer 1

在您的監視功能中，您可以獲取該類名稱的元素，並且您可以應用更改。 像這樣

 scope.$watch('textSize', function (size) {
      var elementResult = element[0].getElementsByClassName('items-list');
            elementResult.style.fontSize = size + scope.unit;
   });

Answer 2

雖然你最好只使用CSS，但這里是如何將它限制在活動范圍內：

scope.$watch(function() {
  return scope.textSize;
}, function(newTextSize, oldTextSize) {

  var paragraphs = element[0].querySelector('.items-list').getElementsByTagName('p');

  var length = paragraphs.length,
      p, i;

  for (i = 0; i < length; i++) {

    p = paragraphs[i];

    p.style.fontSize = size + scope.unit;
  };
});