MDL 按钮波纹不一致

Question

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

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

主视图有一个 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 !-->

备用视图有几个静态按钮，后跟一个 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 无法将事件侦听器绑定到 Angular 正在动态更新的元素。这解释了为什么您的静态按钮大多工作正常，但您的重复按钮通常不工作。

您最好使用 Angular Material，它是 Angular 中的官方 Material 设计实现。一切都应该开箱即用。

MDL 按钮波纹不一致

MDL Button Ripple is Inconsistent

javascript

angularjs

material-design-lite