Was ist die beste Vorgehensweise, wenn eine AngularJS-Direktive in ihrem isolierten Bereich viele Bindungen aufweist?

Question

Angenommen, jede Kartenelement-Anweisung muss viele externe Kontexte kennen und entsprechend handeln.

wir einen Service machen könnten, die Außenwelt, und spritzen den Dienst in dem Kartenpunkt Richtlinie, wie zu überwachen:

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

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

Dies scheint eine schlechte Praxis, weil die Richtlinie zu viel weiß über der Dienst (zB ruft die Funktionen des Dienstes innerhalb der Direktive auf).

Viele Beiträge über AngularJS empfehlen empfehlen Isolation, wie folgt.

Aber es fühlt sich immer noch nicht richtig hier:

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> 

Was ist Ihr Vorschlag ist?

Danke fürs Lesen.

Answer 1

sollten Sie versuchen, die Service-Methoden, die Richtlinie Controller bilden zu nennen,

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: '=' 
     } 
    } 
}); 

Sie diese Richtlinie auch in kleinere Unter Richtlinien versuchen können, spalten.