3

我正在使用 Google 刚刚发布的 Material Design Lite CSS/JS“模板”将一些 Material Design 加入到我的 Angular 应用程序中，我注意到按钮波纹效果非常不一致。

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

主视图有一个 ng 重复的按钮列表：

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

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

4

1 回答 1

1

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

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

于 2015-07-08T20:26:43.067 回答