1

heightAngularJS ディレクティブで要素の を取得すると、relative親の範囲内に表示されるかのように値が表示されます。trueの表示要素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れ、ディレクティブで渡された変数に基づいて要素のサイズを変更しています。

しかし、ディレクティブinline-headerのセクションで要素の高さを確認すると:link

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

...が適用されると同じように、要素の高さを取得します。ng-style

で適用されたスタイルに基づいて、適切な要素の高さを決定することは可能ng-styleですか?

4

0 に答える 0