Какова наилучшая практика, когда директива 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: '=' 
     } 
    } 
}); 

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