我有一个指令,其中包含一个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

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

2回复

计算元素的宽度-角度指令

我是新手。 我正在使用angular1.4和bootstrap。 问题:我有一个跨度,其宽度根据绑定的文本内容而增加或缩小。 在范围内: 根据DOM中该跨度的宽度,我必须继续执行其他一些我想使用指令myStyleDir进行的计算。 在指令的链接函数中,jQuery-lite
2回复

获取元素属性(高度/宽度),而无需在AngularJS中使用指令

在angularJS中,我们可以使用指令来访问元素,并且可以使用这些指令来设置属性。 我想在不使用指令的情况下获取/设置DOM元素的某些属性。 在某些地方,我希望某些元素的高度进行一些计算: 我知道如何使用指令来获取高度,但是在某些情况下,我们需要在项目的不同部分使用div元素
1回复

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

我使用带有模板的angularjs指令将div附加到元素。 CSS使用最大宽度自动设置其宽度样式。 如何找到此宽度进行进一步处理? 我试过了: 但这返回未定义。 有什么方法可以获取所有孩子的尺寸(高度和宽度)? 指令和模板的整个javascript代码如下: 使用j
3回复

Angular JS-在视图渲染之前在指令中获取元素高度

我对angular还是很陌生,因此我们将不胜感激。 我试图根据页面加载,窗口调整大小和另一个自定义事件(当用户单击以扩展内容时)的屏幕尺寸(减去页眉和页脚)垂直对齐div。 所以我为此写了一条指令,我不确定这是否是正确的方法。 我需要获取指令内的元素高度才能使其正常工作。 只是CSS
4回复

Angular指令绑定到元素的高度

我对Angular很新,并希望能够绑定到元素的高度。 在我目前的情况下,我想将el1上的CSS bottom绑定到el2的高度。 他们不共享一个共同的控制器。 我怎样才能做到这一点? 我在这里找到了一个看起来很有希望的答案,但无法看到如何扩展它以允许我指定我想要绑定它的元素。
1回复

根据嵌套指令Angular的宽度更改文本

所以我有一个ng-repeat,它遍历数据对象并将其显示在list指令中。 当文本元素的长度等于或超过容器的长度时,列表中的对象之一应使用缩写形式。 所以我有这个: 因此,我要做的是将指令site-base-name嵌套在list指令中,然后查找元素及其父元素的大小。 然后,我使用
2回复

Angular指令-将绝对定位的死者的宽度设置为根的宽度

我有一个带有绝对位置的后代div(不是子代,而是层次结构下的某个地方)的自定义角度指令。 我想将绝对元素的宽度设置为指令的根宽度,我尝试在指令的链接函数中这样做。 由于各种设计原因,我无法将指令根目录的显示设置为相对。 您如何建议我实现这一壮举? HTML CSS
3回复

Angular指令隐藏元素的“祖父母”

我一直在使用以下代码隐藏页面上任何“ 404”图像的“祖父母”,并且效果很好: 我想将此功能移到自定义Angular指令中,以下是我当前的实现,但它不起作用。 我认为我的问题在于错误地获取了图像的“祖父母”元素。 指示: HTML:
2回复

在Angular指令中附加D3元素

我是d3.js的新手,想转换此代码笔: http ://codepen.io/budelman/pen/NqZwpm,我发现它是一个角度指令。 我面临的一个问题是在角度指令中,我只能访问一个“元素”。 我不知道如何在我的角度代码中添加div#textbox图例。 我试过了: 但
1回复

使用angular指令添加CSS元素

我使用angular和ng-repeat来填充研究列表。 该列表是动态的,因此您可以切换到每个元素的子元素。 因此,基本上,我有一个手风琴样式切换列表,每个列表项可以深入到三个级别。 我有一个jQuery问题,我认为应该用一些角度指令或其他方法解决。 基本上,我有一个箭头(glyphic