Javascript 如何检查控制器内部元件的高度？

我必须实现三列布局，其中一个新项目将加载到高度最低的列。添加到列很简单，我只需将对象推入数组。这是我在控制器里做的

虽然在决定在何处插入新项目之前，很容易在控制器中检查列的高度。但这将是jQuery的实现方式，而不是角度的方式。我如何以“角度”的方式实现它

//内部控制器
$scope.column1=[]；
$scope.column2=[]；
$scope.column3=[]；
var pushToColumn=功能（项目）{
对于（变量i=0；i

HTML

<div class="col-md-4">
  <div class="row" ng-repeat="item in column1">
    <div class="col-md-12">
     <img ng-src="item.src">
    </div>
  </div> 
</div>
<div class="col-md-4">
  <div class="row" ng-repeat="item in column2">
    <div class="col-md-12">
     <img ng-src="item.src">
    </div>
  </div> 
</div>
<div class="col-md-4">
  <div class="row" ng-repeat="item in column3">
    <div class="col-md-12">
     <img ng-src="item.src">
    </div>
  </div> 
</div>

---

你好，来自IRC的Rahul华夫饼干师，知道答案了吗

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, ColumnService, $timeout) {
  // Inside controller
  $scope.column1 = ColumnService.findColumn("column1").data;
  $scope.column2 = ColumnService.findColumn("column2").data;
  $scope.column3 = ColumnService.findColumn("column3").data;
  var pushToColumn = function(items) {
    for(var i = 0; i < items.length; i++) {
      // TODO: Check the height of columns;
      // Suppose height of column2 is minimum
      // For now let me push it in round-robin way
      ColumnService.findSmallestColumn().data.push(items[i]);
    }
  }

  var myItems = [
    {src: 'http://images.fineartamerica.com/images-medium-large-5/winter-sparkle-original-madart-painting-megan-duncanson.jpg'},
    {src: 'http://www.designsnext.com/wp-content/uploads/2014/02/Painting-19.jpg'},
    {src: 'http://www.osnatfineart.com/paintings/08-01/08-01-clouds-painting.jpg'},
    {src: 'https://lh3.googleusercontent.com/-FaDzl-m6UlI/UHervg39HTI/AAAAAAAAAEc/j23-tepXMy8/w379-h379-p/krish2.jpg'},
    {src: 'http://www.spectrahut.com/media/catalog/product/cache/1/image/600x600/9df78eab33525d08d6e5fb8d27136e95/w/a/wall-painting-designs-buy-paintings-online-oil-paintings-canvas-painting-indian-paintings-abstract-painting.jpg'},
    {src: 'http://www.designsnext.com/wp-content/uploads/2014/01/love-painting.jpg'},
    {src: 'http://www.nonprints.com/UploadPic/Garmash/big/Dreaming%20of%20Love.jpg'},
    {src: 'http://www.dollsofindia.com/images/products/animal-posters/horses-painting-wild-spirits-PA82_l.jpg'},
    {src: 'http://best-home-decor.com/wp-content/uploads/2011/12/canvas-painting1.jpg'},
    {src: 'http://webneel.com/daily/sites/default/files/images/daily/12-2012/18-painting-obama.jpg'}
  ];
  var count = 0;
  function staggeredLoading(){

    ColumnService.findSmallestColumn().data.push(myItems[count++])
    if(count<myItems.length-1)
      $timeout(staggeredLoading)
  }
  staggeredLoading();

  //pushToColumn(myItems);
});

app.service("ColumnService", function(){
  var service = {
    columnData:[],
    findSmallestColumn:function(){
      var min = 10000;
      var retColumn = null;
      for (var i = 0; i < service.columnData.length; i++) {
        var curColumn = service.columnData[i];
        if(curColumn.height<min)
        {
          min = curColumn.height;
          retColumn = curColumn;
        }
      }
      console.log("smallest column", retColumn)
      return retColumn;
    },
    findColumn:function(name){
      for (var i = 0; i < service.columnData.length; i++) {
        if(service.columnData[i].name == name)
          return service.columnData[i];
      }
      return service.createColumn(name);
    },
    createColumn:function(name){
      var newColumn = {name:name, height:0, data:[]};
      service.columnData.push(newColumn)
      return newColumn;
    }
  };
  return service;
})

app.directive("namedColumn",function(ColumnService){
  return {
    restrict:"A",
    scope:{namedColumn:"@"},
    link:function(scope, iElem, iAttrs){
      scope.thisColumn = ColumnService.findColumn(scope.namedColumn);

      scope.$watchCollection(function(){return scope.thisColumn.data}, function(newVal,oldVal){
        scope.thisColumn.height = iElem[0].offsetHeight;
        console.log(scope.thisColumn);
      })
    }
  }
})

var-app=angular.module（'plunker'，[]）；
app.controller（'MainCtrl'，函数（$scope，ColumnService，$timeout）{
//内部控制器
$scope.column1=ColumnService.findColumn（“column1”）.data；
$scope.column2=ColumnService.findColumn（“column2”）.data；
$scope.column3=ColumnService.findColumn（“column3”）.data；
var pushToColumn=功能（项目）{
对于（变量i=0；ivar app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, ColumnService, $timeout) {
  // Inside controller
  $scope.column1 = ColumnService.findColumn("column1").data;
  $scope.column2 = ColumnService.findColumn("column2").data;
  $scope.column3 = ColumnService.findColumn("column3").data;
  var pushToColumn = function(items) {
    for(var i = 0; i < items.length; i++) {
      // TODO: Check the height of columns;
      // Suppose height of column2 is minimum
      // For now let me push it in round-robin way
      ColumnService.findSmallestColumn().data.push(items[i]);
    }
  }

  var myItems = [
    {src: 'http://images.fineartamerica.com/images-medium-large-5/winter-sparkle-original-madart-painting-megan-duncanson.jpg'},
    {src: 'http://www.designsnext.com/wp-content/uploads/2014/02/Painting-19.jpg'},
    {src: 'http://www.osnatfineart.com/paintings/08-01/08-01-clouds-painting.jpg'},
    {src: 'https://lh3.googleusercontent.com/-FaDzl-m6UlI/UHervg39HTI/AAAAAAAAAEc/j23-tepXMy8/w379-h379-p/krish2.jpg'},
    {src: 'http://www.spectrahut.com/media/catalog/product/cache/1/image/600x600/9df78eab33525d08d6e5fb8d27136e95/w/a/wall-painting-designs-buy-paintings-online-oil-paintings-canvas-painting-indian-paintings-abstract-painting.jpg'},
    {src: 'http://www.designsnext.com/wp-content/uploads/2014/01/love-painting.jpg'},
    {src: 'http://www.nonprints.com/UploadPic/Garmash/big/Dreaming%20of%20Love.jpg'},
    {src: 'http://www.dollsofindia.com/images/products/animal-posters/horses-painting-wild-spirits-PA82_l.jpg'},
    {src: 'http://best-home-decor.com/wp-content/uploads/2011/12/canvas-painting1.jpg'},
    {src: 'http://webneel.com/daily/sites/default/files/images/daily/12-2012/18-painting-obama.jpg'}
  ];
  var count = 0;
  function staggeredLoading(){

    ColumnService.findSmallestColumn().data.push(myItems[count++])
    if(count<myItems.length-1)
      $timeout(staggeredLoading)
  }
  staggeredLoading();

  //pushToColumn(myItems);
});

app.service("ColumnService", function(){
  var service = {
    columnData:[],
    findSmallestColumn:function(){
      var min = 10000;
      var retColumn = null;
      for (var i = 0; i < service.columnData.length; i++) {
        var curColumn = service.columnData[i];
        if(curColumn.height<min)
        {
          min = curColumn.height;
          retColumn = curColumn;
        }
      }
      console.log("smallest column", retColumn)
      return retColumn;
    },
    findColumn:function(name){
      for (var i = 0; i < service.columnData.length; i++) {
        if(service.columnData[i].name == name)
          return service.columnData[i];
      }
      return service.createColumn(name);
    },
    createColumn:function(name){
      var newColumn = {name:name, height:0, data:[]};
      service.columnData.push(newColumn)
      return newColumn;
    }
  };
  return service;
})

app.directive("namedColumn",function(ColumnService){
  return {
    restrict:"A",
    scope:{namedColumn:"@"},
    link:function(scope, iElem, iAttrs){
      scope.thisColumn = ColumnService.findColumn(scope.namedColumn);

      scope.$watchCollection(function(){return scope.thisColumn.data}, function(newVal,oldVal){
        scope.thisColumn.height = iElem[0].offsetHeight;
        console.log(scope.thisColumn);
      })
    }
  }
})