use jQuery.matchHeight from Angular directive

Question

I am trying to set elements to the same height using jQuery.matchHeight. I call the function from an Angular directive

angular.module('myApp')
  .directive('matchHeight', ['$timeout', function ($timeout) {
    var linkFunction = function(scope, element) {
      $timeout(function() {
        angular.element(element).matchHeight();
      });
    };

  return {
    restrict: 'A',
    link: linkFunction
  };
}]);

The matchHeight plugin and jQuery are included in index.html

<html>
  <head>
    all head stuff
  </head>
  <body>

    <div class="row usps">
      <div class="col-sm-4 usp-block" ng-repeat="block in content.marketing" match-height>
        <a href="{{block.link_url}}" class="thumbnail">
          // Rest of html
        </a>
      </div>
    </div>

    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/matchHeight/dist/jquery.matchHeight.js"></script>

    <script src="scripts/app.js"></script>
    <script src="scripts/directives/matchheight.js"></script>
  </body>
</html>

The problem is that the height is not set although the directive is being applied to the element.

Gert-Jan Kooijmans Gert-Jan Kooijmans · Accepted Answer · 2016-10-20T17:45:22

The jQuery.matchHeight plugin will set all the items in an array to the height of the tallest element in that array.

the match-height directive is applied to a single element. Because there is no array, the height is not set on the element.

Moving the directive to the parent element in the DOM and adding the class equal to the child element(s) gives the array needed to set the height.

<div class="row usps" match-height>
  <div class="col-sm-4 usp-block equal" ng-repeat="block in content.marketing">
    <a href="{{block.link_url}}" class="thumbnail">
      // Rest of html
    </a>
  </div>
</div>

In the service I apply the matchHeight function to all elements with the class equal

angular.module('myApp')
  .directive('matchHeight', ['$timeout', function ($timeout) {
    var linkFunction = function(scope, element) {
      $timeout(function() {
        angular.element(element).find('.equal').matchHeight();
      });
    };

    return {
      restrict: 'A',
      link: linkFunction
    };
}]);

use jQuery.matchHeight from Angular directive

2 Answers