I'm an AngularJS newbie developing an app in phonegap using Angular + Angular Mobile UI.
I have a list of divs in my template file inside Bootstrap columns WITHOUT USING jQuery. I need to square divs applying an height responsive to their width in Bootstrap columns. It should be a really simple script but I can't handle.
Here is my template:
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>
Here's my controller:
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(){
monError();
});
});
and here my directive:
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
}
}
});
I think i'm missing something. Thank you!
I'm an AngularJS newbie developing an app in phonegap using Angular + Angular Mobile UI.
I have a list of divs in my template file inside Bootstrap columns WITHOUT USING jQuery. I need to square divs applying an height responsive to their width in Bootstrap columns. It should be a really simple script but I can't handle.
Here is my template:
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>
Here's my controller:
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(){
monError();
});
});
and here my directive:
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
}
}
});
I think i'm missing something. Thank you!
Share Improve this question edited Jun 14, 2016 at 13:32 Tony Hinkle 4,7427 gold badges25 silver badges35 bronze badges asked Jun 14, 2016 at 13:23 SBOSBO 6232 gold badges8 silver badges22 bronze badges3 Answers
Reset to default 3You could make your directive to be part of ng-repeat and detect when the ng-repeat finishes loading, and in that directive, once you detect that the last one has finished loading, do your first attempted solution.
template:
<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>
Directive:
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;
}
}
});
}
}
}
});
I battled with the same issue for a long time. Binding the heights of divs together when the height of any is modified. This is an angular directive that helps me till today.
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();
});
}
}
});
To use, you need to set the [bind-height] attribute values of the elements whose heights you wish to bind to the same value. For example,
<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>
All divs whose [bind-height] attributes have "my-binding" as their values will have their heights bound to the height of the "tallest" div. If one of them is modified, and has its height changed, the others will be updated too.
In an ng-repeat situation, this also works well...
<div ng-repeat="item in items" bind-height="item-height-bind">
<!--do stuff-->
</div>
If your elements are in columns of three per row, you might which to bind them in threes ...
<div ng-repeat="item in items" bind-height="item-height-{{ceil(($index + 1)/3)}}">
<!--do stuff-->
</div>
I hope this helps you as it did me.
To improve arathi-sreekumar answer I modified it to get the full working code
<div ng-controller="ControllerIndex as Ctrl">
<div ng-repeat="item in items" item-list="object-list">
<div class="col-xs-4 object-list-container">
<div class="object-list" >
<p ng-bind-html="item.name"></p>
</div>
</div>
</div>
</div>
Now a directive gets a CSS class as a parameter and sets elements' heights to the max height
let myDirective = 'itemList';
angular.module('app').directive('itemList', function($timeout){
return {
link: function ($scope, $element, $attrs) {
if ($scope.$last){
var elements = document.getElementsByClassName($attrs[myDirective]);
var maxHeight = 0;
//Get the max height
$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;
}
}
// set to max height to divs
for (var j = 0; j < elements.length; j++) {
if (elements[j].offsetHeight < maxHeight) {
angular.element(elements[j]).height(maxHeight);
console.log(elements[j].offsetHeight);
}
}
});
}
}
}
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745240774a4618166.html
评论列表（0条）