Angular bootstrap-material-design 消除了 ng-repeat 中的涟漪效应答案

【问题标题】：Angular bootstrap-material-design removes ripple effect in ng-repeatAngular bootstrap-material-design 消除了 ng-repeat 中的涟漪效应
【发布时间】：2016-03-24 01:40:08
【问题描述】：

我在我的 Angular 应用程序中使用 bootstrap-material-design。涟漪效应在整个应用程序中运行良好，但在使用 ng-repeat 时，我失去了涟漪效应。

我在 ng-repeat 之外的同一 <ul> 中创建了一个项目并且工作正常。

是不是因为 ng-repeat 创建了一个新的作用域？如果是这样，我应该如何正确处理它......？

我的代码中是否缺少某些内容？

<ul class="list-unstyled">
  <li class="btn" ng-repeat="data in eventsData">
    {{data.title}}
  </li>
</ul>

【问题讨论】：

你见过令人难以置信的角材料项目吗？强烈建议检查一下。它可以比其他框架做得更多：material.angularjs.org/latest
@staypuftman 我有，在几天前的 1.0 版本之前尝试使用它。我发现文档对我的知识有所欠缺，他们给出了可以学习的示例，但是基本的布局结构是模糊的，如果你想从头开始，它并不像他们希望的那样友好跨度>

标签： angularjs twitter-bootstrap material-design bootstrap-material-design

【解决方案1】：

在<ul> 组上添加.withripple 会将涟漪应用于整个列表，但无法将涟漪应用于单个元素。如果您正在动态加载列表，则将在 Bootstrap 材质库初始化后创建重复的元素，因此波纹不会应用于这些元素。

要解决这个问题，我们必须将.withripple 类添加到重复元素，然后在列表完成重复后初始化库，以便可以应用波纹。这可以使用 Angular 指令轻松完成：

var app = angular.module('gradebook', []);
app.directive('repeatRipple', function() {
  return function(scope, element, attrs) {
    if (scope.$last) {
      return $.material.init();
    }
  };
});

...

<ul>
    <li ng-repeat="item in items" class="withripple" repeat-ripple>
<ul>

【讨论】：

【解决方案2】：

查看文档（顺便说一句非常有趣的项目），我可以看到您没有使用触发涟漪的类或标签。这些是默认的：

"withRipples": ".btn:not(.btn-link), .card-image, .navbar a:not(.withoutripple), .nav-tabs a:not(.withoutripple), .withripple"

尝试添加 .withripple 类，或在 li 标签中使用按钮/标签

【讨论】：

你是对的！将“.withripple”类添加到 ul 标签解决了它。我在我的许多试验中使用过，而不是出于某种原因将其删除，现在它可以工作了......