2

I'm working with Angular Materia 0.10.1.

I have a md-button nested inside a md-list-item. Both elements triggers the ripple effect when clicked, and when I click the button, it triggers the ripple effect on both elements at the same time. I want to have ripples on the button or on the list element only, but never both at the same time.

<md-list flex>
    <md-list-item ng-click="a('a')">
      <p>Some name</p>
      <md-button class="md-accent md-raised" ng-click="b('b', $event)">Do something</md-button>
    </md-list-item>
 </md-list>

I've used $event.stopPropagation() but it doesn't stop the ripples in the same way it stops nested click events.

This Plunker can demonstrate it better.

Bruno Finger
  • 2,105
  • 3
  • 27
  • 47
  • Already answered here: http://stackoverflow.com/questions/15390393/two-nested-click-events-with-angularjs – rtribaldos Aug 25 '15 at 15:14
  • 1
    @swordf1zh It's not the same thing, as I'm not talking about the click event, but the ripple effect. As I stated in the question `$event.stopPropagation()` will not stop the ripple effect in the same way it stops nested click events. – Bruno Finger Aug 25 '15 at 15:16

1 Answers1

1

It seems to be something built into the md-primary class and how it works with the list item. If you look at the examples there are a few that have side buttons that do not exhibit this behavior

by simply swapping the class on your button to md-secondary it seems to fix your issue (styling is a separate one now though)

 <md-button class="md-secondary md-raised" ng-click="b('b')">Do something</md-button>

http://plnkr.co/edit/4fo8u190gpKyoHznVbFM?p=preview

Alternatively, the example uses md-icon instead of buttons and that seems to work too.

ajmajmajma
  • 13,712
  • 24
  • 79
  • 133
  • I took your advice and did like in the examples with `md-icon`. Using `md-button` inside a `md-list-item` doesn't seem very correct, as it doesn't work as easily as it should. `md-secondary` also causes issues, so I believe `md-icon` is the correct way. – Bruno Finger Aug 25 '15 at 16:36
  • @BrunoFinger glad I could help. – ajmajmajma Aug 25 '15 at 17:04