Recently, I began learning angularjs and came across a script to change the font size. However, this script ended up changing all <p> tags on the entire webpage. Is there a way to modify the font size of <p> tags only within the <div class="items-list"> section?
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">