Javascript Angular指令，用于更新多个图元的高度以匹配最高图元

我对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);

是否有人能指导我如何通过一个指令（或另一种更合适的方式）来实现这一点。中继器看起来像这样

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

在视图中呈现ng repeat last元素后，需要精确运行代码

角度法的解决方案如下所示

HTML

<div class="element-class" on-finish-ng-repeat-render 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 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的

$timeout

，以确保在angular完成dom操作之前不会检查高度。这是一些代码，下面我放置了一个

HTML

<div class="element-class" on-finish-ng-repeat-render 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 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>

这里有一个指向plunker的链接，也可以看到它的作用：

---

我也想这样做。这条线对我帮助很大。经过一些麻烦之后，我找到了解决办法

我想做的事情是获取所有元素的长度，并将所有元素的长度设置为所有元素中最高的

因此，对于第一个，我需要检测ng repeat何时通过指令完成加载，在该指令中，一旦我检测到最后一个已完成加载，我必须找到所有元素的最高长度，并将其应用于所有元素

HTML

<div class="col-lg-4" ng-repeat="category in categoriesList.categories" set-max-height> 
  <div class="catagory-item">
    <h1 class="text-center">{{category}}</h1>
  </div>
</div>

很有魅力（谢谢！）

但如果您计划在重复过程中筛选或添加新元素，则应该在“均衡器添加”指令的结尾松开“IF”（否则它不会调整大小），并在控制器上实现一个移除函数，如果被销毁，则移除元素：

    .directive('equalizeHeight', equalizeHeight)
    .directive('equalizeHeightAdd', equalizeHeightAdd);

    equalizeHeight.$inject = ['$timeout'];

    /* @ngInject */
    function equalizeHeight() {
        var directive = {
            bindToController: true,
            controller: ControllerName,
            controllerAs: 'vm',
            link: link,
            restrict: 'A',
            scope: {}
        };
        return directive;

        function link(scope, element, attrs) {

        }
    }

    ControllerName.$inject = ['$window', '$timeout'];

    /* @ngInject */
    function ControllerName($window, $timeout) {
        var elements = [];
        this.addElement = addElement;
        this.removeElement = removeElement;
        this.resize = resize;

        activate();

        function activate() {
            angular.element($window).on('resize', function () {
                angular.forEach(elements, function(el){
                    el[0].style.height = null;
                });
                resize();
            });
        }

        function addElement(element){
            elements.push(element);
            console.log(elements.length);
        }

        function removeElement(element){
            elements.splice(elements.indexOf(element),1);
        }

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

    /* @ngInject */
    function equalizeHeightAdd(){
        return {
            restrict: 'A',
            require: '^^equalizeHeight',
            link: function(scope, element, attrs, ctrl_for){
                // add element to list of elements
                ctrl_for.addElement(element);
                ctrl_for.resize();
                element.on('$destroy', function () {
                    ctrl_for.removeElement(element);
                    ctrl_for.resize();
                });
            }
        };
    }

很抱歉，我不能对他的回答发表评论，因为他没有声誉，但我认为这是一个相当重要的补充。对于不同的格式也很抱歉，但这是我在项目中使用它的方式，但基本上是一样的

---

@LoganGarland它对你有帮助吗？不喜欢css flexbox？

    .directive('equalizeHeight', equalizeHeight)
    .directive('equalizeHeightAdd', equalizeHeightAdd);

    equalizeHeight.$inject = ['$timeout'];

    /* @ngInject */
    function equalizeHeight() {
        var directive = {
            bindToController: true,
            controller: ControllerName,
            controllerAs: 'vm',
            link: link,
            restrict: 'A',
            scope: {}
        };
        return directive;

        function link(scope, element, attrs) {

        }
    }

    ControllerName.$inject = ['$window', '$timeout'];

    /* @ngInject */
    function ControllerName($window, $timeout) {
        var elements = [];
        this.addElement = addElement;
        this.removeElement = removeElement;
        this.resize = resize;

        activate();

        function activate() {
            angular.element($window).on('resize', function () {
                angular.forEach(elements, function(el){
                    el[0].style.height = null;
                });
                resize();
            });
        }

        function addElement(element){
            elements.push(element);
            console.log(elements.length);
        }

        function removeElement(element){
            elements.splice(elements.indexOf(element),1);
        }

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

    /* @ngInject */
    function equalizeHeightAdd(){
        return {
            restrict: 'A',
            require: '^^equalizeHeight',
            link: function(scope, element, attrs, ctrl_for){
                // add element to list of elements
                ctrl_for.addElement(element);
                ctrl_for.resize();
                element.on('$destroy', function () {
                    ctrl_for.removeElement(element);
                    ctrl_for.resize();
                });
            }
        };
    }