Custom Angular directive to dynamically change font size?

Question

I have some content on my site that doesn't format well because different browsers/screens render the font-size a little differently. To counteract this, I'm attempting to use Angular to get the height of some <p> tags, and if they're taller than my layout allows, lower their font size.

The <p> tags I'm trying to manipulate are contained in a directive which generates multiple content boxes based on some JSON.

I have created this directive:

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

This is the directive which creates those boxes (this works):

<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>

I'm at home creating custom directives with a source URL, but this is my first go at creating a logical attribute-based directive.

What have I done wrong?

Answer 1

Try adding jQuery , before loading angular.js. In this post, it is written that Angular is using its own library jqLite to substitute for jQuery when the jQuery library is not included. jqLite does not include a height() function. To be able to use height(), you have to include the full jQuery library.

Just add <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script> before the line where you include angular.js.

I tested it with the following code:

<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>

EDIT

After some testing, I found the reason why it is not working as expected. The function inside the directive is called, before the expression {{data.body}} is executed in the template. It means that at the moment the directive is called, the text inside the paragraph is literally {{data.body}} . What you want is to postpone the execution of the directive after the expression has been executed. You can do it as follows:

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"));
          }
        })
    }
});

I can also confirm that element.height() and element.context.offsetHeight return the same value. The height of the element in px. So, it doesn't matter which of the two you'll use.

I hope this helps.