Question

我正在使用刚刚发布的Material Design Lite CSS / JS“模板”将一些Material Design添加到我的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 !-->

备用视图有几个静态按钮，后跟一个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 Design实现。一切都应该开箱即用。

MDL按钮波动不一致

1 个答案: