angularjs - NgMaterial / Material Design リップル効果が余白からにじみ出ています

Question

sidenav パネルのリンクを表す一連の div にマテリアル デザインを適用しました。

私の問題は、リップル クリック効果が広範に適用されすぎて、div のコンテンツだけでなく、その親のmd-item-content, 要素にも影響を与えることです。

md-ink-ripple以下に示すように、属性は HTML の属性として 1 回適用されます。

md-item祖父母に上向き、子要素に下向きの両方で、波紋属性の場所をいじってみましたが、<label>どこに配置しても、同じmd-item-content要素を波及し続けているようです。

md-item-content編集 - ターゲットタグをではなく に切り替えることで、この問題を解決したと思いますdiv。これを後世に残し、利害関係者が 2 セントを寄付できるようにします。

<md-content>
<md-list>
  <md-item ng-repeat="item in data.exhibits" id="toc-item-{{::$index}}">
    <md-item-content>
      <div class="toc-indices">
        <span>{{::$index + 1}}</span>
      </div>
      <div class="md-tile-content exhibit-link" md-ink-ripple ng-click="goToSection($index, -1)" ng-class="{'md-item-active': (data.currentExhibitIndex === $index)}">
        <label>{{::item.title}}</label>
      </div>
    </md-item-content>
    <md-item-content ng-repeat="section in item.sections">
      <label class="md-tile-content exhibit-section-link" ng-click="goToSection($parent.$index, $index)" id="toc-item-{{::$parent.$index}}-section-{{::$index}}" ng-class="{'md-item-active': (data.currentExhibitIndex === $parent.$index && data.sectionIndex === $index)}">
            {{::section.title}}
      </label>
    </md-item-content>
    <section class="clo-parts-divider"></section>
  </md-item>
</md-list>