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

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

===============>>#1 票数: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
        }
    }
});

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

===============>>#2 票数:-1

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

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

  ask by sg.cc translate from so

未解决问题?本站智能推荐: