使用 Angular 指令中的 jQuery.matchHeight答案

【问题标题】：use jQuery.matchHeight from Angular directive使用 Angular 指令中的 jQuery.matchHeight
【发布时间】：2016-10-20 13:01:25
【问题描述】：

我正在尝试使用 jQuery.matchHeight 将元素设置为相同的高度。我从 Angular 指令调用函数

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

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

matchHeight 插件和 jQuery 包含在 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>

问题是虽然指令被应用于元素，但高度没有设置。

【问题讨论】：

标签： javascript jquery angularjs angularjs-directive angularjs-controller

【解决方案1】：

jQuery.matchHeight plugin 会将数组中的所有项目设置为该数组中最高元素的高度。

匹配高度指令应用于单个元素。因为没有数组，所以没有在元素上设置高度。

将指令移动到 DOM 中的父元素并将类 equal 添加到子元素中，可以得到设置高度所需的数组。

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

在服务中，我将 matchHeight 函数应用于类 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
    };
}]);

【讨论】：

【解决方案2】：

看看这个，伙计们。 https://github.com/christopher-weir/AngularJs-MatchHeight 这个自定义指令工作正常。此外，代码库非常简单，您可以根据项目需要进行调整。

【讨论】：