javascript - mdInkRipple 波纹整个 mdVirtualRepeat - Angular Material

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-list 作为 md-virtual-repeat-container 的父级，并使其子级 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-list-item 具有 ng，则默认情况下会存在 md-ink-ripple (并且还有一个不错的鼠标悬停效果) -click 属性 - 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  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;
}