当 AngularJS 指令在其隔离范围内有很多绑定时，最佳实践是什么？答案

【问题标题】：What's the best practice when an AngularJS directive has a lot of bindings in its isolated scope?当 AngularJS 指令在其隔离范围内有很多绑定时，最佳实践是什么？
【发布时间】：2016-07-19 18:30:48
【问题描述】：

假设每个 card-item 指令需要了解很多外部上下文并相应地采取行动。

我们可以创建一个服务来监控外部世界，并将该服务注入到 card-item 指令中，比如：

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>

你有什么建议？

感谢阅读。

【问题讨论】：

为什么不从指令控制器调用服务？
或许有必要将指令card-item分割成更小的指令，执行特定的任务。例如，创建指令card-item-print 用于打印或下载。例如，创建一个指令card-item-preview 用于预览。以此类推。
@StepanKasyanenko。 card-item 内有一个“预览”按钮。当card-item 处于预览状态时，需要突出显示“预览”按钮（而其他card-items 的“预览”按钮则不需要）。这就是为什么card-item 必须知道外部上下文（“我是否是预览中的那个，以及其他card-items”）。感谢您的评论。

标签： angularjs design-patterns reusability angular-directive design-principles

【解决方案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: '='
        }
    }
});

您也可以尝试将此指令拆分为更小的子指令。

【讨论】：