javascript - How to check height of an element inside controller? -
i have implement 3 column layout in new item loaded column of lowest height. adding column simple have push object array. doing in controller.
although easy check height of column in controller before making decision of insert new item. jquery way of implementation not angular way. how implement in "angular way" ?
// inside controller $scope.column1 = []; $scope.column2 = []; $scope.column3 = []; var pushtocolumn = function(items) { for(var = 0; < items.length; i++) { // todo: check height of columns; // suppose height of column2 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>
hi rahul wafflejock irc here, got answer
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 = 0; < items.length; i++) { // todo: check height of columns; // suppose height of column2 minimum // let me push 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; (var = 0; < 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){ (var = 0; < 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); }) } } })
Comments
Post a Comment