material-button does not add inner anchor for ui-router's ui-sref

[brettstack]

I'm guessing this is due to the order in which the directives get executed. Not sure if this should be posted here or on ui-router's issues.

[ThomasBurleson]

Can you elaborate on the issue; perhaps provide a CodePen/Plunkr?

[brettstack]

The problem is material-button adss an inner element of button when using ui-sref, instead of adding an inner element of a like when you use href or ng-href.

<material-button ui-sref="activities"> // Adds child element <button class="material-button-inner">
<material-button href="/activities/"> // Adds child element <a class="material-button-inner">

This looks like a two-part issue. The first one is a bug in ui-rouer. it looks like they want to add href attribute to elements with ui-sref, but they're doing element[0][attr] = newHref; instead of element.attr(attr, newHref);. I'll open an issue there for this.

The second part of the issue is a compilation/priority order issue. material-button is being compiled first, so even if the first issue is resolved, the material-button won't have an href until after it's been compiled. I'm not sure if this part is an issue for angular/material or ui-router though.

[ThomasBurleson]

Let's reopen this as a valid set of issues and explore options to support the ui-sref attribute for <a /> transposition [which also solves the compilation/priority order issue].

[brettstack]

Okay, I closed because I saw it as more of an issue with ui-router and figured you guys probably didn't want to do something specific for a third party. But given its popularity it might make sense to. Here's my PR there that gets it working without needing to change anything on the angular/material side angular-ui/ui-router#1454