CODEWITHSUNDEEP
javascriptjquerycssangularjsangularjs-directive
Metatrix
Metatrix

Reputation: 279

Is there a way get width and height of child element in a directive in Angularjs

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

Answers (1)

user7770096
user7770096

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

Related Questions