Question

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

包含控制器可能有多个此指令的实例，因此document.getElementsByClassName('myclass')[0].clientWidth无法正常工作。选择指令的element有效，但其代码看起来与element.children().children().children()[32].clientWidth相似，但看起来并不稳定。什么是正确的，Angular的做法？

Answer 1

每当你需要在Angular中进行任何DOM操作时，指令都是可行的。 “Angular”方法是使用您的directive's link函数。

DEMO：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

使用Angular方式获取指令内的元素宽度

2 个答案: