javascript - 用于更新多个元素的高度以匹配最高元素的 Angular 指令

Question

我对 Angular 的指令相当陌生，正在尝试找出使用它们的正确方法。我正在使用 ng-repeat 来填充元素列表。加载中继器后，我想查看每个元素并找出哪个元素最高(其中包含最多的文本)，然后强制所有元素都达到该大小。

在 jQuery 中完成这个的方法是这样的:

var tallest = 0;
// Loop through each element
$('.element-class').each(function () {
    var thisHeight = $(this).height();      
    if (thisHeight > tallest)
        tallest = thisHeight;
});
// Apply height to all elements
$('.element-class').height(tallest);

有人能指导我如何使用指令(或另一种更合适的 Angular 方式)来完成此操作。中继器看起来像这样。

<div class="element-class" ng-repeat="item in items">
    <div class="element-title" ng-bind="item.title"></div>
    <p class="element-text" ng-bind="item.description"></p>
</div>

Answer 1

这是您可以执行的操作。使用指令，您可以跟踪每个元素，并在最后一个元素上调用一个函数，该函数将计算每个元素的高度并找到最高的元素，然后将所有元素设置为该高度。您将需要使用 Angular 的 $timeout 以确保在 Angular 完成对 dom 的操作之前不检查高度。这是一些代码，下面我放了一个 link to a plunker .

HTML

<div equalize-height>
  <div class="element-class" equalize-height-add="item" ng-repeat="item in items">
    <div class="element-title" ng-bind="item.title"></div>
    <p class="element-text" ng-bind="item.description"></p>
  </div>
</div>

Angular

.directive('equalizeHeight', ['$timeout', function($timeout){
return {
  restrict: 'A',
  controller: function($scope){
    console.log('equalizeHeightFor - controller');
    var elements = [];
    this.addElement = function(element){
      console.log('adding element:', element);
      elements.push(element);
      console.log(elements);
    }

    // resize elements once the last element is found
    this.resize = function(){
      $timeout(function(){
        console.log('finding the tallest ...');
        // find the tallest
        var tallest = 0, height;
        angular.forEach(elements, function(el){
          height = el[0].offsetHeight;
          console.log('height:', height);
          if(height > tallest)
            tallest = height;
          // console.log(el);
        });
        console.log('tallest:', tallest);
        console.log('resizing ...');
        // resize
        angular.forEach(elements, function(el){
          el[0].style.height = tallest + 'px';
        });
        console.log('-- finished --');
      }, 0);
    };
  }
};
}])

.directive('equalizeHeightAdd', [function($timeout){
return {
  restrict: 'A',
  require: '^^equalizeHeight',
  link: function(scope, element, attrs, ctrl_for){
    console.log('equalizeHeightAdd - link');
    // add element to list of elements
    ctrl_for.addElement(element);
    if(scope.$last)
      ctrl_for.resize();
  }
};
}])

这是一个 plunker 的链接，也可以看到它的实际效果: http://plnkr.co/edit/X4jmwZ?p=preview