Ripple MDL button is not compatible
I am using the Material Design Lite CSS / JS template that was just released by Google to sprinkle some Material Design into my Angular app and I noticed that the ripple button effect is rather inconsistent.
Sometimes, in my main application, the app never loads the ripple of the button despite working in other views, and then only one or two instances are running in other views. For example,
The main view has one ng-repeating list of buttons:
<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 !-->
The alternate views have some static buttons followed by a list of ng-repeat buttons:
<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 !-->
Is this bad practice or something else? Is there a reason for this?
source to share
As far as I know, MDL uses vanilla JavaScript to implement many interactions. This conflicts with Angular directives - for example, there is no way for MDL to bind an event listener to an element that is dynamically updated by Angular. This explains why your static buttons mostly work fine, but your repeating buttons usually don't.
You will probably be better off Angular Material , which is the official Material Design implementation in Angular. Everything should just work out of the box.
source to share