Question

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

我已经将我的tile变成了一个指令，并且当前该指令的html内容被包装在一个锚标记中。这可以达到我指定的链接，但是锚标记只匹配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

由于该指令看起来没有高度，因此将任何响应高度/宽度样式添加到锚标签都不会起作用。

将此代码添加到指令的css和锚标记中，将锚/链接带到切片的完整高度和宽度。

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

并且使用切片发生的任何响应性更改也将与此代码一起使用。

如何使mdGridTile成为链接

1 个答案: