AngularJS：在ng-repeat中爲div設置相同的高度

Question

我是AngularJS新手，使用Angular + Angular Mobile UI在phonegap中開發應用程序。

我有我的模板文件裏面的Bootstrap列的列表沒有使用jQuery。我需要在方括號列中應用響應寬度的高度。它應該是一個非常簡單的腳本，但我無法處理。

這裏是我的模板：

template.html

<div ng-controller="ControllerIndex as Ctrl" item-list>  
    <div ng-repeat="item in items" > 
     <div class="col-xs-4 object-list-container"> 
      <div class="object-list" > 
       <p ng-bind-html="item.name"></p> 
      </div> 
     </div> 
    </div>  
</div> 

這裏是我的控制器：

angular.module('app').controller('ControllerIndex', function ($scope, $http, $element) { 
    $scope.items =[]; 

    $http.get(baseUrl +'data/item.json').success(function(data){ 
     $scope.items = data.item; 
    }).error(function(){ 
     commonError(); 
    }); 

}）;

，在這裏我指令：

angular.module('app').directive('itemList', function($timeout){ 
    return { 
     link: function ($scope, $element, $attrs) { 
     //I tried a lot of things 
     $timeout(function(){ 
       var elements = document.getElementsByClassName("object-list"); 
       console.log(elements); //Gives an array of 2 
       var elementsLenght = elements.length; 
       console.log(elementsLenght); //Gives 0!!!!!! 
      }); 

      //Get the max height and set to the other div, but i can't enter this cycle 
      for (var i = 0; i < elementsLenght; i++) { 
        var elementHeight = elements[i].offsetHeight; 
        //console.log(elementHeight); 
        if (elements[i].offsetHeight > maxHeight) { 
         maxHeight = elementHeight; 
        } 
       }  


     //Attempt number 2 
var angularElement = angular.element($element); 
var elementObject = angular.element($element[0].querySelector('.object-list')); 
console.log(elementObject); //Gives a T object with lenght 0 
      var xx = angular.element(elementObject[0]); 
      console.log(xx.offsetHeight); 
      console.log('elementObject: ', angular.element(elementObject[0])); //Gives html  


     } 
    } 
}); 

我想我失去了一些東西。謝謝！

Answer 1

你可以讓你的指令成爲ng-repeat的一部分，並檢測ng-repeat何時完成加載，並且在該指令中，一旦你檢測到最後一個加載完成，就做你第一次嘗試的解決方案。

模板：

<div ng-controller="ControllerIndex as Ctrl">  
    <div ng-repeat="item in items" item-list> 
     <div class="col-xs-4 object-list-container"> 
      <div class="object-list" > 
       <p ng-bind-html="item.name"></p> 
      </div> 
     </div> 
    </div>  
</div> 

指令：

angular.module('app').directive('itemList', function($timeout){ 
    return { 
     link: function ($scope, $element, $attrs) { 
      if ($scope.$last){ 
       var elements = document.getElementsByClassName("object-list"); 
       var maxHeight = 0; 
       //Get the max height and set to the other div 
       $timeout(function(){ 
        for (var i = 0; i < elements.length; i++) { 
         var elementHeight = elements[i].offsetHeight; 
         //console.log(elementHeight); 
         if (elements[i].offsetHeight > maxHeight) { 
          maxHeight = elementHeight; 
         } 
        }  
       }); 
      } 
     } 
    } 
}); 

Answer 2

我同樣的問題鬥爭了很久。當任何高度被修改時，將div的高度綁定在一起。這是一個有助於我直到今天的角度指令。

var app = angular.module('app'); //insert your module name instead 

function bind_height() { 
    function doforthiselem(me) { 
     var value = $(me).attr("bind-height"); 
     var elems = $("[bind-height='" + value + "']"); 
     var heights = elems.toArray().map(function (elem) { return $(elem).height(); }); 
     if (Math.max.apply(me, heights) > Math.min.apply(me, heights)) $(me).height(Math.max.apply(me, heights)); 
    } 
    $("[bind-height]").each(function() { 
     doforthiselem(this); 
    }); 
} 

$(window).load(function() { 
    if (typeof app == "undefined") bind_height(); 
}); 

app.directive("bindHeight", function() { 
    return { 
     restrict: 'A', 
     link: function ($scope, element, attrs) { 
      bind_height(); 
      element.bind("DOMSubtreeModified", function() { 
       bind_height(); 
      }); 
     } 
    } 
}); 

要使用，您需要設置您希望綁定到相同值的高度的元素的[bind-height]屬性值。例如，

<div> 
    <div bind-height="my-binding" style="height: 80px;"> 
     <p>Hello World</p> 
    </div> 
    <div bind-height="my-binding" style="height: 25px;"> 
     <p>Hello America</p> 
     <p>Hello World</p> 
    </div> 
    <div bind-height="my-binding" style="height: 63px;"> 
     <p>Shoot for the stars</p> 
    </div> 
</div> 

所有div其[綁定高度]屬性具有「我的結合」作爲自己的值將綁定到「最高」 div的高度的高度。如果其中一個被修改，並且其高度發生了變化，其他人也會被更新。

在NG-重複的情況，這也是行之有效的...

<div ng-repeat="item in items" bind-height="item-height-bind"> 
    <!--do stuff--> 
</div> 

如果你的元素有三種每行的列，你可能這將它們綁定三五成羣...

<div ng-repeat="item in items" bind-height="item-height-{{ceil(($index + 1)/3)}}"> 
    <!--do stuff--> 
</div> 

我希望這可以幫助你，因爲它對我有用。