Reputation: 279
I am using an angularjs directive with a template to append divs to element. CSS automatically styles its width using max width. How do I find this width for further processing? I tried:
for(var i=0; i<numchild; i++){
angular.element(element.children()[i]).clientWidth
}
but this returns undefined. Is there any way to get the dimensions (height and width) of all children?
Entire javascript code for directive and template is as below:
angular.module('components', [])
.directive('mydir', function () {
numchild = 5
return {
restrict: 'E',
replace: true,
link: function(scope, element, attr) {
for(var i=0; i<numchild; i++){
if(i==0){
element.append('<div class="myclass" style="display:table">Random</div><br>');
}
else {
element.append(
'<div class="myclass" style="display:table">Random noise here and there and everywhere around us</div><br>'
)
}
console.log(angular.element(element.children()[i]).clientWidth);
}
}
}
})
angular.module('MyApp', ['components'])
Updated this with a jsfiddle: http://jsfiddle.net/z55a9/2/
Upvotes: 0
Views: 1484
Reputation:
console.log(angular.element(element.children()[i])[0].clientWidth);
is what you want, but you are also looping through your <br>
tags so numchild=5
is wrong. (you have 5 div's and 5 br's).
Upvotes: 1