Как заключить в директиву элемент md-grid-tile в Material Design?

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-grid-tile в пользовательскую директиву?

Answer 1

Если вы удалите scope собственность от вашего card директива, мы можем убрать изолированную область этой директивы

Тогда в 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 контроллер.