mdGridTile을 링크로 만드는 방법

이 질문에 대한 답변이 thread인데 답변이 더 이상 표시되지 않는 것 같습니다. 속성 이미지와 몇 가지 관련 정보가 표시된 타일 목록이 있습니다. 나는 각각이 재산에 대한 더 많은 정보가 담긴 다른 페이지의 전체 링크가되고 싶습니다.mdGridTile을 링크로 만드는 방법

타일을 지시문으로 만들었으며 현재 해당 지시문의 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로 페이지를 타일 목록으로

감사합니다!

출처

2016-09-07 laura42

지시문이 작동하지 않습니다 앵커 태그에 어떤 반응 높이/폭 스타일을 추가, 더 높이 없었다 것 같습니다입니다.

이 코드를 지시문의 css에 추가하면 앵커 태그는 앵커/링크를 타일의 전체 높이와 너비로 가져옵니다.

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

타일과 함께 발생하는 모든 반응이 변경 사항은이 코드에서도 작동합니다.

출처

2016-09-07 17:27:51 laura42

mdGridTile을 링크로 만드는 방법

답변

관련 문제