Angular bootstrap-material-设计消除了 ng-repeat 中的连锁反应

Question

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

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

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

我的代码中是否遗漏了什么？

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

Answer 1

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

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

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

Answer 2

在 <ul> 组中添加 .withripple 会对整个列表应用波纹，但对单个元素应用波纹将不起作用。如果您正在动态加载列表，那么重复的元素将在 Bootstrap Material 库初始化后创建，因此波纹不会应用于这些元素。

要解决此问题，我们必须将 .withripple class 添加到重复元素，然后在列表完成重复后初始化库，以便可以应用波纹。这可以使用 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>

Angular bootstrap-material-设计消除了 ng-repeat 中的连锁反应

Angular bootstrap-material-design removes ripple effect in ng-repeat

twitter-bootstrap

angularjs

material-design

bootstrap-material-design