Javascript MDL按钮纹波不一致

我正在使用谷歌刚刚发布的材质设计Lite CSS/JS“模板”，在我的Angular应用程序中加入一些材质设计，我注意到按钮的涟漪效应非常不一致

有时在我的主应用程序视图中，它从不加载按钮涟漪，尽管它在其他视图中工作，然后在其他视图中，它只在前一两个实例中工作。比如说,

主视图有一个按钮列表：

<li ng-repeat="item in items">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">{{item.name}}</a>
</li> <!-- ripple sometimes works totally fine !-->

{{item.name}

备选视图有两个静态按钮，后跟一个ng重复按钮列表：

<li id="non-repeating-list-item-1">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">Hello</a>
</li> <!-- ripple always works totally fine !-->
<li id="non-repeating-list-item-2">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">Hello</a>
</li> <!-- ripple always works totally fine !-->

<li ng-repeat="item in items">
    <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">{{item.name}}</a>
</li> <!-- ripple never works !-->

你好


你好


{{item.name}

---

这是坏习惯还是什么？发生这种情况有什么原因吗

据我所知，MDL使用普通JavaScript来实现许多交互。这与Angular的指令冲突——例如，MDL无法将事件侦听器绑定到Angular正在动态更新的元素。这就解释了为什么静态按钮大多工作正常，而重复的按钮通常工作不正常

---

您可能会更好地使用，这是Angular中的官方材质设计实现。一切都应该开箱即用。

@Colin很高兴这有帮助。我鼓励你“接受”这个答案，以防其他人碰到同样的问题。