mdGridTileをリンクにする方法

Question

私はこのthreadと似たような質問がありますが、答えはもうリストされていないようです。私は、プロパティ画像といくつかの関連情報を表示するタイルのリストを持っています。私はそれぞれがプロパティの詳細情報を持つ別のページへの完全なリンクになりたいと思います。

タイルをディレクティブにしました。現在、そのディレクティブのhtmlコンテンツはアンカータグで囲まれています。これは、指定したリンクに到達するように動作しますが、アンカータグはmdGridTileFooterの高さにのみ一致します。

タイル全体をクリック可能にする方法はありますか？ユーザーは（だけでなく、下のフッターをそれの任意の部分をクリックし、意図したリンクにアクセスできるように

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> 

：

<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ページをタイルリストに

ありがとうございました！

Answer 1

ディレクティブは動作しませんアンカータグに任意の応答、高さ/幅スタイリングを追加し、何の高さを持っていたように見えるので。

このコードをディレクティブのcssに追加すると、アンカータグによって、アンカー/リンクがタイルの完全な高さと幅になります。

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

また、タイルで発生する反応の変化は、このコードでも同様に機能します。