mdInkRipple rippling ganz mdVirtualRepeat - Winkelmaterial

Question

Ich versuche, die mdInkRipple-Direktive auf einem mdVirtualRepeat zu verwenden, aber ich stoße auf ein Problem, wo die md-Tinte-Ripple den gesamten virtuellen Wiederholungscontainer kräuseln wird. Hier ist mein Code.

<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

Eine Option ist md-list als Mutter der md-virtual-repeat-container einzuführen und seine Kinder md-list-item machen - CodePen

Markup

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

Zusätzlich md-Ink-Ripple ist es durch Standard (und auch ein schöner Mausüber-Effekt), wenn das md-list-item ein ng-click Attribut hat - CodePen

Markup

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