2016-09-29 10 views
0

私は要素の高さを角度で一度だけ設定したいと思いますが、内部でjqueryを使用したくありません。複数回起動するとng-styleは使用できません。jqueryまたはjavascriptを使用せずにmdのdailog要素の高さを設定する方法は?

は、ここで私はMD-仮想リピートコンテナの高さを設定Mと、このマークアップは、ID「mdDialogProcessFlows」とdiv要素に包まれ、この中にその

<md-card> 
      <md-table-container flex> 
       <md-virtual-repeat-container id="vrContainerProcessFlow" ng-init="$ctrl.getMdTableContainerWidth()"> 
        <table md-table class="md-table-striped" md-row-select="true" multiple="true" ng-model="$ctrl.selected" md-progress="$ctrl.promise"> 
         <thead md-head fix-head md-order="modifyTs"> 
          <tr md-row> 
           <th md-column md-order-by="processFlowNbr">Number</th> 
           <th md-column md-order-by="processFlowDesc">Name</th> 
           <th md-column md-order-by="ownerUserId">Created By</th> 
           <th md-column md-order-by="modifyUserId">Modified By</th> 
           <th md-column md-order-by="createTs">Created Date</th> 
           <th md-column md-order-by="modifyTs">Last Modified Date</th> 
          </tr> 
         </thead> 
         <tbody md-body> 
          <tr md-row md-select="processFlow" md-on-select="$ctrl.updateSelection" md-on-deselect="$ctrl.updateSelection" md-virtual-repeat="processFlow in $ctrl.processFlows | orderBy: modifyTs"> 
           <td md-cell 
            ng-click="$ctrl.OnProcessFlowClick($event, processFlow)"> 
            {{processFlow.processFlowNbr}} 
            <md-tooltip>Click to modify</md-tooltip> 
           </td> 
           <td md-cell>{{processFlow.processFlowNbr}}</td> 
           <td md-cell>{{processFlow.processFlowDesc}}</td> 
           <td md-cell>{{processFlow.ownerUserId}}</td> 
           <td md-cell>{{processFlow.modifyUserId}}</td> 
           <td md-cell>{{processFlow.createTs | date:'MM/dd/yyyy'}}</td> 
           <td md-cell>{{processFlow.modifyTs | date:'MM/dd/yyyy'}}</td> 
          </tr> 
          <tr md-row ng-if="$ctrl.processFlows.length === 0"> 
           <td md-cell>No Records Found !</td> 
          </tr> 
         </tbody> 
        </table> 
       </md-virtual-repeat-container> 
      </md-table-container> 
      <process-flows-confirm-delete></process-flows-confirm-delete> 
     </md-card> 

のための私のhtmlです。

これは、すべてのボディはNGスタイル、ディレクティブとofcourseの無いjavascriptやjqueryのを使用せずに任意のソリューションをtypescriptですで

getMdTableContainerWidth(): void { 
     let style = "height: "; 
     let mdDialog = document.getElementById("mdDialogProcessFlows").scrollHeight; 
     style += mdDialog - 80 + 'px'; 

     let mdVRContainer = angular.element(document.getElementById("vrContainerProcessFlow")); 
     mdVRContainer.attr("style", style); 
    } 

を高さを算出する機能を有しているんですか?

+0

なしNGスタイル、ディレクティブ、ネイティブjavascriptやjqueryの - で動作するように他に何がありますか? – Christoph

+0

thats私はこの問題を解決するために何を見つけなければならないのか、一度だけトリガーするもの – AbhiGoel

答えて

0

ng-styleを1回限りのバインドで使用することはできます。これは値を一度だけ設定し、関数をもう一度呼び出さない。この構文を使用します。::式ワンタイム・バインドになります

ng-style="::{width: getMdTableContainerWidth()}" 

+0

ああ、私はそれがうまくいくと思います。 – AbhiGoel

関連する問題