有没有办法在Angularjs的指令中获取子元素的宽度和高度

时间:2014-08-04 18:55:26

标签: javascript jquery css angularjs angularjs-directive

我正在使用带有模板的angularjs指令将div附加到元素。 CSS使用最大宽度自动调整其宽度。如何找到这个宽度进行进一步处理?我试过了:

for(var i=0; i<numchild; i++){
    angular.element(element.children()[i]).clientWidth
}

但这会返回undefined。有没有办法获得所有孩子的尺寸(高度和宽度)?

指令和模板的整个javascript代码如下:

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'])

使用jsfiddle更新了此内容:http://jsfiddle.net/z55a9/2/

1 个答案:

答案 0 :(得分:1)

console.log(angular.element(element.children()[i])[0].clientWidth);

是您想要的,但您也在循环浏览<br>代码,因此numchild=5错误。 (你有5个div和5个&b; s。)