mdInfoRipple全体リップリングmdVirtualRepeat - 角材

Question

mdVirtualRepeatでmdInkRippleディレクティブを使用しようとしていますが、md-ink-rippleがバーチャルリピートコンテナ全体をリプルする問題が発生しています。ここに私のコードです。

<md-virtual-repeat-container md-auto-shrink="true"> 
    <div md-virtual-repeat="obj in controller.data" ng-click="null" md-ink-ripple> 
     <div class="key-repeated" layout="column" layout-align="center start"> 
      <p class="md-title" style="margin-bottom: 0px;">{{ obj.text }}</p> 
      <p class="md-body-1">{{ obj.caption }}</p> 
     </div> 
    </div> 
</md-virtual-repeat-container> 

Answer 1

一つの選択肢はmd-virtual-repeat-containerの親としてmd-listを紹介し、その子を作ることですmd-list-item - CodePen

マークアップ

<md-content layout="column"> 
    <md-list> 
    <md-virtual-repeat-container id="vertical-container"> 
     <md-list-item md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item" flex="" md-ink-ripple> 
     {{item}} 
     </md-list-item> 
    </md-virtual-repeat-container> 
    </md-list> 
</md-content> 

はさらに、MD-インクリップルはでありmd-list-itemにng-clickという属性（）が設定されている場合は、デフォルトの

マークアップ

<md-content layout="column"> 
    <md-list> 
    <md-virtual-repeat-container id="vertical-container"> 
     <md-list-item md-virtual-repeat="item in ctrl.dynamicItems" md-on-demand="" class="repeated-item" flex="" md-ink-ripple ng-click="hello()"> 
     {{item}} 
     </md-list-item> 
    </md-virtual-repeat-container> 
    </md-list> 
</md-content> 

JS

.controller('AppCtrl', function($timeout, $scope) { 
    $scope.hello = function() { 
     console.log("Hello!"); 
    } 

CSS

.virtualRepeatdemoDeferredLoading .repeated-item { 
    height: initial; 
}