如何在指令中封装材质设计md-grid-tile元素？

Question

我试图通过创建一个指令，取代重构我的瓷砖：

<md-grid-list md-cols="2" md-row-height="1:1" md-gutter="12px"> 
    <md-grid-tile ng-repeat="card in cards" class="card-tile" md-rowspan="1" md-colspan="1"> 
     <md-grid-tile-footer> 
      <h3>{{CCtrl.card.title}}</h3> 
      <h4 class="md-caption">Last updated {{CCtrl.card.lastUpdated | ago}}</h4> 
     </md-grid-tile-footer> 
    </md-grid-tile> 
</md-grid-list> 

使用自定义指令：

<md-grid-list md-cols="2" md-row-height="1:1" md-gutter="12px"> 
    <card ng-repeat="card in cards" card="card"></card> 
</md-grid-list> 

与下面的定义：

.directive('card', function(CONFIG) { 
     return { 
      restrict: 'AE', 
      scope: { 
       card: '=' 
      }, 
      replace: true, 
      templateUrl: './ng/Card/card.tpl.html', 
      controller: 'CardCtrl', 
      controllerAs: 'CCtrl', 
      bindToController: true 
     } 
    }) 

和模板（card.tpl.html）：

<md-grid-tile class="card-tile" md-rowspan="1" md-colspan="1"> 
     <md-grid-tile-footer> 
      <h3>{{CCtrl.card.title}}</h3> 
      <h4 class="md-caption">Last updated {{CCtrl.card.lastUpdated | ago}}</h4> 
     </md-grid-tile-footer> 
    </md-grid-tile> 

我必须使用“replace：true”才能使Material Design样式/布局正常工作。 我收到以下错误：

Error: $compile:multidir 
Multiple Directive Resource Contention 
Multiple directives [card (module: project), mdGridTile (module: 
material.components.gridList)] asking for new/isolated scope on: <md- 
grid-tile class="card-tile" md-rowspan="1" md-colspan="1" ng- 
repeat="card in cards.sketchCards" card="card"> 

有没有办法来封装MD-网平铺在一个自定义的指令？

Answer 1

如果您从card指令删除scope属性，我们可以带走指令的隔离范围

然后在link功能的card指令，我们可以$eval卡属性，并将其存储在范围或控制器。

function link (scope, element, attrs, ctrl) { 
    // we do this to bypass isolated scope 
    // stored on scope 
    scope.card = scope.$eval(attrs.card); 
    // stored on controller 
    ctrl.card = scope.$eval(attrs.card); 
} 

这样做的缺点的方法是，你可能不得不$watch在card控制器存在卡内的数据。