html - 如何将 mdGridTile 制作成链接

Question

我有一个类似的问题 thread ，但似乎不再列出答案。我有一个显示属性图像和一些相关信息的图 block 列表。我希望每一个都是指向另一个页面的完整链接，其中包含有关该属性的更多信息。

我已将我的图 block 制作成一个指令，目前该指令的 html 内容包含在一个 anchor 标记中。哪个可以到达我指定的链接，但是该 anchor 标记仅与 mdGridTileFooter 的高度匹配。

有没有办法让整个磁贴都可以点击？这样用户就可以点击它的任何部分并访问预期的链接(不仅仅是底部页脚？

HTML 指令:

<a ng-click="spVm.linkToProperty(proforma)" ng-href="{{spVm.path}}">
<div>
<md-grid-tile-footer class="saved-prop-address">

  <div class="saved-prop-address-title" ng-bind="spVm.city"></div>

  <div class="saved-prop-address-subtitle" 
   ng-bind="proforma.listing.update_date | date: 'MMMM dd'"></div>

</md-grid-tile-footer>
</div>
</a>

带有磁贴列表的 HTML 页面:

      <md-grid-list md-cols-xs="2"
        md-cols-sm="3" md-cols-md="3" md-cols-gt-md="6"
        md-row-height="1:1" md-gutter="4px">

        <md-grid-tile class="saved-prop"
        ng-repeat="proforma in sdVm.pageGroups[sdVm.saved.idx]"
        ng-click="sdVm.showSelectedProperty(proforma); sdVm.linkToProperty(proforma)"
        ng-href="{{sdVm.path}}"
        ng-style="{'background-image':'url({{proforma.thumbnail_url}})'}">

          <pgo-saved-property proforma="proforma">
          </pgo-saved-property>
        </md-grid-tile>

      </md-grid-list>

谢谢!

Answer 1

由于指令看起来没有高度，因此向 anchor 标记添加任何响应式高度/宽度样式将不起作用。

将此代码添加到指令的 css 和 anchor 标记，将使 anchor /链接达到图 block 的完整高度和宽度。

style="display:block;height:100%;width:100%;"

并且磁贴发生的任何响应式更改也适用于此代码。