ダイアログ、タブ、固定フッター付きアンギュラJS

Question

アンギュラマテリアル、タブ、ダイアログを使用しようとしています。

私が探しているのは、内部にタブが表示されたダイアログを持つことです。その中で、最初のタブが高さの100％を埋めるようにしたい（タブヘッダーを除いて、私が "フッター"を追加したクラス）

私は始めたが、高さのすべてを取るために、リストの項目を取得。

http://plnkr.co/edit/2szJQPaMfXF4utyQO1X1?p=preview

を使用すると、タブ1のリストをスクロールダウンした場合、あなたは私がすべてでスクロールできないにしたいと思われる、「フッター」を参照してくださいよ。その項目はダイアログの下部に固定されます。

<md-dialog aria-label="Mango (Fruit)"> 
    <md-dialog-content> 
    <div class="md-dialog-content"> 
     <md-tabs> 
     <md-tab label="First Tab"> 
      <md-content flex> 
      <md-list flex> 
       <md-item ng-repeat="item in items"> 
       <md-item-content> 
        <div flex class="md-tile-content"> 
        {{item}} 
        </div> 
       </md-item-content> 
       <md-divider></md-divider> 
       </md-item> 
      </md-list> 
      </md-content> 
      <div class="footer"> 
      Footer should be at the bottom 
      </div> 
     </md-tab> 
     <md-tab label="Second tab"> 
      <md-list flex> 
      <md-item ng-repeat="item in items"> 
       <md-item-content>{{item}}</md-item-content> 
      </md-item> 
      </md-list> 
     </md-tab> 
     </md-tabs> 
    </div> 
    </md-dialog-content> 
</md-dialog> 

Answer 1

私はsolutiを持っていますon、各タブの中にはsticky footerはありえないと思った。これは多少のデングブレイカーですが、これを回避し、ng-ifを使用して必要なときにスティッキーフッターを表示することができます。

各タブ内でスティッキーフッターを使用する方法についての回答があり、最初のタブのように振る舞い、賞賛と謝辞が与えられます。

http://plnkr.co/edit/6bkgGW?p=preview

<md-dialog aria-label="Mango (Fruit)" layout="column" layout-fill> 
    <md-dialog-content layout="column" flex> 
    <md-tabs layout="column" flex> 
     <md-tab label="First Tab"> 
      <md-content> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. Morbi eget congue risus, quis rhoncus quam. Suspendisse vitae hendrerit erat, at posuere mi. Cras eu fermentum nunc. Sed id ante eu orci commodo volutpat non ac est. Praesent ligula diam, congue eu enim scelerisque, finibus commodo lectus.</p> 
      </md-content> 
      <div class="footer"> 
      Footer should be at the bottom 
      </div> 
     </md-tab> 
     <md-tab label="Second tab"> 
      <md-list> 
      <md-item ng-repeat="item in items"> 
       <md-item-content>{{item}}</md-item-content> 
      </md-item> 
      </md-list> 
     </md-tab> 
     </md-tabs> 
    </md-dialog-content> 

    <md-dialog-actions layout="row"> 
    <md-button ng-click="answer('useful')" style="margin-right:20px;"> 
     Useful 
    </md-button> 
    </md-dialog-actions> 
</md-dialog>