将 md-grid-tile 嵌套到 md-button 中不起作用 (Angular Material)

Question

我用 md-grid-tiles 制作了一个 md-grid-list，我想把每一个都做成 link。我尝试将每个图块包装在一个 md 按钮中，但这会使元素消失。

它不一定是一个 md 按钮，它可以是一个简单的锚标记，但我似乎无法解决这个问题。

如有任何帮助，我们将不胜感激。

我的代码：

   <md-grid-list>

      <md-button>
         <md-grid-tile>
            <img class="crest" src="img/afc-bournemouth.png">
            <md-grid-tile-footer layout-align="center center">Bournemouth</md-grid-tile-footer>
        </md-grid-tile>
     </md-button>

   </md-grid-list>

Answer 1

为什么不这样做：

   <md-grid-list>
    <a class="md-grid-tile" href="http://google.com" target="_blank">
        <img class="crest" src="img/afc-bournemouth.png" />
        <md-grid-tile-footer layout-align="enter center">Bournemouth</md-grid-tile-footer>
    </a>
</md-grid-list>

Answer 2

我运行遇到了类似的问题，但我最终只是使用 CSS 解决了这个问题。

<md-grid-tile>
    <a href="{{item.url}}" style="min-width: 100%; max-width: 100%; width: 100%; min-height: 100%; max-height: 100%; height: 100%;">
        <md-icon class="material-icons" style="font-size: 2.5em; position: absolute; top: 10px; left: 10px;">{{item.icon}}</md-icon>
        <md-grid-tile-footer>
            <span layout="column" style="padding-left: 5px;"></span>
            <span layout="column" style="margin-left: 5px;" class="xs-list-item-text">
                {{item.abbreviation}}
           </span>
        </md-grid-tile-footer>
    </a> 
</md-grid-tile>

将 md-grid-tile 嵌套到 md-button 中不起作用 (Angular Material)

nesting md-grid-tile into md-button not working (Angular Material)

angularjs

angularjs-material