1

When getting the height of a element in an AngularJS directive I am seeing the value as if it were to appear inside the confines of the relative parent. How can I get the height of the element based on the true width of display element?

I have the following HTML, which places my directive's template into a div with a 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>

This is done to show static elements within the directive within that width, but there is also a dynamic popover which I can give a different width to. This is my directive's template:

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

I have an ng-style being applied to the absolute positioned popover, resizing the element based on the variable passed in on the directive.

But when I check the height of the inline-header element in the link section of my directive:

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

... I get the height of the element as before the ng-style is applied to it.

Is it possible to determine the proper element height, based on styles applied with an ng-style?

Nicholas Pappas
  • 10,439
  • 12
  • 54
  • 87
  • Check this out might help. You are using .height() which is a jquery method as welland you're using a javascript to select the inline-input. http://stackoverflow.com/questions/526347/css-javascript-how-do-you-get-the-rendered-height-of-an-element – dowomenfart Mar 04 '15 at 20:25
  • This is a shot in the dark, but you could try wrapping the height checking code in a $timeout block so that it'll execute after the ng-style has run. – m0meni Mar 04 '15 at 20:28
  • @dowomenfart - I'm unclear what I should pull out of the linked post. I had actually found that on my original search, but everything there seems to be returning the same value as the code I already have. Should I pulling my object references differently and/or accessing the height differently? – Nicholas Pappas Mar 04 '15 at 20:36

0 Answers0