javascript - 自定义 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

尝试添加 jQuery ，在加载 angular.js 之前。在 this帖子中写道，当不包含 jQuery 库时，Angular 正在使用自己的库 jqLit​​e 来替代 jQuery。 jqLit​​e 不包括 height()功能。为了能够使用 height()，您必须包含完整的 jQuery 库。

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

我使用以下代码对其进行了测试:

<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 为单位)。因此，您使用两者中的哪一个并不重要。

我希望这会有所帮助。