自定义Angular指令可动态更改字体大小？

Question

我的网站上的某些内容格式不正确，因为不同的浏览器/屏幕呈现的字体大小略有不同。 为了解决这个问题，我尝试使用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的自定义指令，但这是我第一次创建基于逻辑属性的指令。

我做错了什么？

Answer 1

尝试在加载angular.js之前添加jQuery 。 在这篇文章中，当不包含jQuery库时，Angular使用自己的库jqLit​​e替代了jQuery。 jqLit​​e不包含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为单位）。 因此，您将使用这两者中的哪一个都没有关系。

我希望这有帮助。