应用“ng-style”后获得绝对定位元素高度

时间:2015-03-04 20:22:31

标签: jquery css angularjs directive ng-style

当获取AngularJS指令中元素的height时,我看到该值就好像它出现在relative父级的范围内。如何根据显示元素的真height获取元素的width

我有以下HTML,它将我的指令模板放入div width: 200px

<div style="width:200px">
  <inline-input-popover value="foo" width="350">
    <p>Type string to insert into target. Here's some extra text to add length to the paragraph.</p> 
  </inline-input-popover>
</div>

这样做是为了在指令中显示该宽度内的静态元素,但是还有一个动态弹出框,我可以给它一个不同的宽度。这是我的指令模板:

<div class="inline-input-popover">
  <input class="placeholder-input" type="text" ng-model="value" ng-focus="hasFocus=!hasFocus" />

  <div class="inline-popover" outside-click="closePopover()" ng-click="keepFocus()" ng-show="hasFocus" ng-style="{width:{{width}}+'px'}">
    <div class="inline-header" ng-transclude></div>
    <input class="inline-input" type="text" ng-model="value" />
    <button ng-click="closePopover()">Done</button>
  </div>
</div>

我将ng-style应用于absolute定位的popover,根据指令传入的变量调整元素大小。

但是当我检查指令的inline-header部分中link元素的高度时:

var inlineInput = elem[0].getElementsByClassName('inline-input')[0];
console.log(inlineHeader.height());

...在应用ng-style之前,我将元素的高度设为

是否可以根据应用ng-style

的样式确定正确的元素高度

0 个答案:

没有答案