Question

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

我在同一个ng-repeat的{{1}}之外创建了一个项目并且工作正常。

是否因为ng-repeat创建新范围而导致？如果是这样，我应该如何正确处理它？？

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

<ul>

Answer 1

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

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

尝试添加.withripple课程，或使用li标签内的按钮/标签

Answer 2

在.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>

角度自举材料设计消除了ng-repeat中的波纹效应

2 个答案: