3

Google がリリースしたばかりの Material Design Lite CSS/JS "テンプレート" を使用して、いくつかの Material Design を Angular アプリに振りかけていますが、ボタンのリップル効果がかなり一貫していないことに気付きました。

私のメインアプリビューでは、他のビューで動作しているにもかかわらず、ボタンのリップルがロードされず、他のビューでは最初の 1 つまたは 2 つのインスタンスのみが動作することがあります。例えば、

メインビューには、ボタンの ng-repeat リストが 1 つあります。

<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 は通常の JavaScript を使用して多くの対話を実装しています。これは、Angular のディレクティブと競合します。たとえば、Angular が動的に更新する要素に MDL がイベント リスナーをバインドする方法はありません。これは、静的ボタンがほとんど正常に機能する理由を説明していますが、繰り返しボタンは通常そうではありません。

おそらく、 Angularの公式マテリアル デザイン実装であるAngular Materialを使用したほうがよいでしょう。すべてが箱から出してすぐに動作するはずです。

于 2015-07-08T20:26:43.067 に答える