什么'；当AngularJS指令在其隔离范围内有许多绑定时，最佳做法是什么？

假设每个卡片项指令都需要了解大量外部上下文，并相应地采取行动

我们可以创建一个用于监视外部世界的服务，并将该服务注入到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>

范围：{
项目：'='，
当选:"&"，
inSelectMode:“&”，
inMoldMode:“&”，
onToggleSelect:“&”，
onTogglePreview:“&”，
onToggleSort:“&”，
onDelete:“&”，
""和",，
isSorting:“&”，
地区：“=”，
printUrl:“=”，
}

你有什么建议

---

感谢阅读。

您应该尝试从指令控制器调用服务方法

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

---

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

您应该尝试从指令控制器调用服务方法

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

---

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

为什么不从指令控制器调用服务？也许有必要将指令

卡项

拆分为较小的指令，以执行特定任务。例如，要创建用于打印或下载的指令

卡项目打印

。例如，要创建用于预览的指令

卡项目预览

。等等。在

卡片项目中有一个“预览”按钮。当
卡片项目处于预览状态时，需要突出显示“预览”按钮（而其他
卡片项目
s“预览”按钮不显示）。这就是为什么
卡项目
必须知道外部上下文（“在其他
卡项目
中，我是否是预览中的人”）。谢谢您的评论。您为什么不从指令控制器呼叫服务？也许有必要将指令
卡项
划分为较小的指令，以执行特定任务。例如，要创建用于打印或下载的指令
卡项目打印
。例如，要创建用于预览的指令
卡项目预览
。等等。在
卡片项目中有一个“预览”按钮。当
卡片项目处于预览状态时，需要突出显示“预览”按钮（而其他
卡片项目
s“预览”按钮不显示）。这就是为什么
卡项目
必须知道外部上下文（“在其他
卡项目
中，我是否是预览中的人”）。谢谢你的评论。