自定义Angular指令来动态改变字体大小

Custom Angular directive to dynamically change font size?

本文关键字：字体 改变 动态 Angular 指令 自定义      更新时间：2023-09-26

我的网站上有一些内容格式不太好，因为不同的浏览器/屏幕呈现的字体大小略有不同。为了解决这个问题，我尝试使用Angular来获取一些<p>标签的高度，如果它们比我的布局允许的高，降低它们的字体大小。

我试图操纵的<p>标签包含在一个指令中，该指令基于一些JSON生成多个内容框。

我已经创建了这个指令:

spaModule.directive ("resizeParagraph", function() {
    return function (scope, element, attrs) {
        while (element.height() > 400) {
            element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
        }
    }
});

这是创建这些方框的指令(这个有效):

<div ng-repeat="data in homeCtrl.homeData" class="content-box">
<img class="content-image" ng-src="images/home/{{ data.imageSrc }}"/>
  <div class="sub-content">
    <h1>
      {{ data.heading }}
    </h1>
    <p resize-paragraph class="large-text">
      {{ data.body }}
    </p>
    <a ng-href="#/{{ data.linkUrl }}" class="box-link">
      {{ data.linkValue }}
    </a>
  </div>
</div>

我在家里用源URL创建自定义指令，但这是我第一次尝试创建一个基于逻辑属性的指令。

我做错了什么?

在加载angular.js之前尝试添加jQuery。在这篇文章中，它写道，当jQuery库不包含时，Angular使用自己的库jqLite来替代jQuery。jqLite不包含height()功能。为了能够使用height()，你必须包含完整的jQuery库。

只需在包含angular.js的行之前添加<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>。

我用下面的代码对它进行了测试: 
<style type="text/css">
.large-text {
  font-size: 600px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="angular.js"></script>
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.homeCtrl = {};
    $scope.homeCtrl.homeData = [
      {
        heading: 'Heading',
        body: 'Body',
        linkValue: 'LinkValue'
      }
    ];
});
app.directive("resizeParagraph", function() {
    return function (scope, element, attrs) {
        while (element.height() > 100) {
            element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
        }
    }
});
</script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div ng-repeat="data in homeCtrl.homeData" class="content-box">
    <img class="content-image" ng-src="images/home/{{ data.imageSrc }}"/>
    <div class="sub-content">
      <h1>
        {{ data.heading }}
      </h1>
      <p resize-paragraph class="large-text">
        {{ data.body }}
      </p>
      <a ng-href="#/{{ data.linkUrl }}" class="box-link">
        {{ data.linkValue }}
      </a>
    </div>
  </div>
</div>

编辑

经过一些测试，我找到了它不像预期的那样工作的原因。在模板中执行表达式{{data.body}}之前，调用指令内部的函数。这意味着在调用指令的那一刻，段落内的文本实际上是{{data.body}}。你想要的是在表达式被执行后延迟指令的执行。你可以这样做:

app.directive("resizeParagraph", function() {
    return function (scope, element, attrs) {
        scope.$watch(name, function () {
          while (element.height() > 50) {
              element.css("font-size", (parseInt(element.css("font-size")) -1 + "px"));
          }
        })
    }
});

我还可以确认element.height()和element.context.offsetHeight返回相同的值。元素在px中的高度。因此，您使用哪一个都无关紧要。

相关文章：