以Angular方式在指令内获取元素宽度

Question

我有一个指令，其中包含一个width: 100%的元素。 但是，指令必须知道该元素的clientWidth ，即以像素而不是百分比为单位。 该元素深埋在指令的DOM中。

包含的控制器可能具有此指令的多个实例，因此执行document.getElementsByClassName('myclass')[0].clientWidth将不起作用。 选择指令的element是element.children().children().children()[32].clientWidth ，但是该指令的代码看起来类似于element.children().children().children()[32].clientWidth ，看起来不太稳定。 正确的Angular方法是什么？

Answer 1

每当您需要在Angular中进行任何DOM操作时，就可以使用指令。 “角度”方法是使用指令的链接功能。

演示： http : //plnkr.co/edit/83aZUmsRzuTUFotxUYSB?p=preview

模板使用案例：

<div element-width></div>

指令示例：

angular.module('myApp').directive('elementWidth',function(){
    return {
        restrict: "A",
        link:function($scope, element){
          // element param being passed in refers 
          // to the element the directive is bound to, in this case, the DIV


          // do something with the element width here
        }
    }
});

希望这会有所帮助，如果您有任何疑问，请告诉我。

Answer 2

我想到了。 尽管单个元素没有.getElementsByClassName ，但是您仍然可以使用.querySelector 。 所以我完成的代码是：

element[0].querySelector('.myclass').clientWidth