自定義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為單位）。 因此，您將使用這兩者中的哪一個都沒有關系。

我希望這有幫助。