Какова лучшая практика, когда директива AngularJS имеет много привязок в своей изолированной области?

Question

Предположим, что каждая директива по карточному предмету должна знать много внешних контекстов и действовать соответственно.

Мы могли бы создать сервис для мониторинга внешнего мира и добавить сервис в директиву элемента карты, например:

scope: {
  item: '=',
  service: '=',
}

<card-item item="card" 
           service="ItemService">
</card-item>

Это кажется плохой практикой, потому что директива слишком много знает о сервисе (например, вызывает функции сервиса внутри директивы).

Многие посты о лучших практиках AngularJS предполагают изоляцию, например, следующие.

Но это все еще не чувствует себя здесь:

scope: {
  item: '=',
  isSelected: '&',
  inSelectMode: '&',
  inMoldMode: '&',
  onToggleSelect: '&',
  onTogglePreview: '&',
  onToggleSort: '&',
  onDelete: '&',
  isPreviewing: '&',
  isSorting: '&',
  locales: '=',
  printUrl: '=',
}

<card-item item="card" 
           is-selected="ItemService.isSelected(card)"
           in-select-mode="ItemService.inSelectMode()"
           in-mold-mode="ItemService.inMoldMode()"
           on-toggle-select="ItemService.toggleSelect(card)"
           on-toggle-preview="ItemService.togglePreview(card)"
           on-toggle-sort="ItemService.toggleSortMode()"
           on-delete="ItemService.removeParticle(card)"
           is-previewing="card === entityInPreview"
           is-sorting="ItemService.inSortMode()"
           locales='LocaleService.currentLocales'
           print-url="getPrintUrl(card)">
</card-item>

Каково ваше предложение?

Спасибо за прочтение.

Answer 1

Вы должны попытаться вызвать сервисные методы из директивы контроллера,

xApp.directive('xDirective', function(itemService, LocaleService, getPrintUrl) {
    function controller() {
        angular.extend($scope, {
            isSelected: ItemService.isSelected(card),
            inSelectMode: "similar to above",
            inMoldMode: "similar to above",
            onToggleSelect: "similar to above",
            onTogglePreview: "similar to above",
            onToggleSort: "similar to above",
            onDelete: "similar to above",
            isPreviewing: "similar to above",
            isSorting: "similar to above",
            locales: "similar to above",
            printUrl: "similar to above"
        })    
    }

    return {
        controller: controller,
        scope: {
            card: '=',
            item: '='
        }
    }
});

Вы также можете попытаться разделить эту директиву на более мелкие субдирективы.