javascript - MDL 按钮波纹不一致

Question

我正在使用 Google 刚刚发布的 Material Design Lite CSS/JS"template"将一些 Material Design 应用到我的 Angular 应用中，我注意到按钮波纹效果非常不一致。

有时在我的主应用程序 View 中，尽管在其他 View 中工作，但它永远不会加载按钮波纹，然后在其他 View 中，它只在前一个或两个实例中工作。例如，

主视图有一个 ng-repeating 按钮列表:

<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 !-->

备用 View 有几个静态按钮，后跟一个 ng-repeat 按钮列表:

<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 !-->

这是不好的做法还是什么？有什么理由发生这种情况吗？

Answer 1

据我所知，MDL 使用 vanilla JavaScript 来实现许多交互。这与 Angular 的指令冲突——例如，MDL 无法将事件监听器绑定(bind)到 Angular 正在动态更新的元素。这解释了为什么您的静态按钮大部分都能正常工作，但您的重复按钮通常却不行。

使用 Angular Material 可能会更好，这是 Angular 中的官方 Material Design 实现。一切都应该开箱即用。