1

我在我的 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>
4

2 回答 2

1

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

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

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

于 2015-12-17T14:57:23.677 回答
1

添加.withripple到<ul>组中会将涟漪应用于整个列表，但将涟漪应用于单个元素将不起作用。如果您正在动态加载列表，则将在 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>
于 2016-04-26T22:39:46.200 回答