javascript - MDL Button Ripple is Inconsistent -
i'm using material design lite css/js "template" google released sprinkle material design angular app , i've noticed button-ripple effect pretty inconsistent.
sometimes on main app view never loads button ripples despite working in other views, , on other views works first 1 or 2 instances. example,
main view has 1 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 works totally fine !-->
alternate views have couple of static buttons followed ng-repeat list of buttons:
<li id="non-repeating-list-item-1"> <a class="mdl-button mdl-js-button mdl-ja-ripple-effect">hello</a> </li> <!-- ripple 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 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 bad practice or something? there reason happen?
as far know, mdl uses vanilla javascript implement many of interactions. conflicts angular's directives - example, there's no way mdl bind event listener element angular dynamically updating. explains why static buttons work fine, repeated buttons not.
you'd better off angular material, official material design implementation in angular. should work out of box.
Comments
Post a Comment