CODEWITHSUNDEEP
angularjsangular-material
JoannaFalkowska
JoannaFalkowska

Reputation: 3677

I don't want Angular Material to add a md-button when I use ng-click on md-list-item

I need something like this:

<md-list-item ng-click="something()"> ... </md-list-item>

But Angular Material compiles it to:

<md-list-item role="listitem" tabindex="-1" class="ng-scope md-clickable">
  <button class="md-no-style md-button" type="button" ng-transclude="" ng-click="something()">
    ...
  </button>
</md-list-item>

What? You may think it's clever, but it is not even documented! In my case it looks ugly and works rather badly, and it's not even valid HTML (creates buttons inside buttons). If I wanted an AM button with all styles etc. I would use a button, but here I want only a simple working ng-click on a md-list-item. If it's necessary to have different element then please create a <div> inside but not a button? Can I somehow prevent Angular Material from compiling it like this?

Upvotes: 0

Views: 560

Answers (1)

sdfacre
sdfacre

Reputation: 1273

oops, looks like nope.

below is the source code of that behavior

if (tAttrs.ngClick || tAttrs.ngHref || tAttrs.href || tAttrs.uiSref || tAttrs.ngAttrUiSref) {
    wrapIn('button');
}

if you create your own ng-click, then you might be able to bypass this logic.

Upvotes: 1

Related Questions