Question

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

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

// Inside controller
$scope.column1 = [];
$scope.column2 = [];
$scope.column3 = [];
var pushToColumn = function(items) {
  for(var i = 0; i < items.length; i++) {
    // TODO: Check the height of columns;
    // Suppose height of column2 is minimum;
    $scope.column2.push(items[i]);
  }
}

var myItems = [
  {src: 'http://link.to/image1.png'},
  {src: 'http://link.to/image2.png'},
  {src: 'http://link.to/image3.png'},
  {src: 'http://link.to/image4.png'},
  {src: 'http://link.to/image5.png'},
  {src: 'http://link.to/image6.png'},
  {src: 'http://link.to/image7.png'},
  {src: 'http://link.to/image8.png'}
];
pushToColumn(myItems);

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>

Answer 1

来自IRC的Rahul wafflejock嗨，得到了答案

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);
      })
    }
  }
})

http://plnkr.co/edit/WCUIhSkJqD1eYhbLuy32?p=preview

如何检查控制器内元素的高度？

1 个答案: