javascript - 在父范围内跟踪多个非重复的 Angular Directive(指令)

Question

这里有一个架构问题要问你。

假设我有一个包含表单的 Controller “MyController”。在该 Controller 的标记中，有各种预定义的表单部分(例如，不是通过 ng-repeat 定义的，这是这里要求的关键部分)，它们都实现了指令“myDirective”。 myDirective 控制的每个部分都有两项功能:

1) 它可以作为一个部分进行验证(例如，与 myDirective 相关的每个元素都经过验证，但表单上的其他元素没有验证)。

2)该部分可以使用另一个指令(我已经编写过)来展开/折叠。

myDirective 获取为其分配的节点，并将其包装在一个 div 中，该 div 用于根据两个可能的触发器“展开”和“折叠”该部分:

1) 单击指定的“触发”元素，例如“展开”或“折叠”按钮

2) MyController 上的属性更改，然后触发元素展开或折叠。

以下也是要求；

1)一次只能“打开”一个部分(它们都默认关闭)

2)在没有首先“有效”的情况下，部分不能“关闭”(例如，不能从一个部分跳转到另一个部分)

鉴于这些要求，我的问题如下:

这里如何尊重“关注点分离”？在我看来，由于这些指令对它们的相邻指令一无所知(甚至不知道它们的 $index 因为这不是ng-repeated)他们必须向 MyController“注册”才能协调他们的行动。

但这引入了一整套 Controller 指令交互，使它们完全相互依赖。我知道让它们完全不了解彼此是理想的，但不仅存在指令到 Controller 的通信，而且还存在 Controller -指令- Controller -指令通信的潜力。例如，如果指令指出用户已准备好通过某些用户操作切换到它(例如，完成表单部分或单击另一个部分的展开触发器)，那么它必须通过 Controller 的注册的部分指令。但即便如此，它也不是那么简单:必须检查用于关闭的指令的有效性，如果无效，则需要取消整个流程，直到用户修复他们的工作。如果可以，那么我们回到原来的指令，告诉它可以关闭，然后打开新的目标部分。

长话短说，这里有很多依赖功能。理想情况下，应该有一些跟踪数组和一个属性，说明 Controller 上哪个部分处于事件状态，但是当涉及到公开在这种情况下 Controller 和指令之间似乎越来越多的代码时，我会感到拘谨。

所以，如果你之前错过了: 如何在这里尊重“关注点分离”？

感谢您的阅读!!

Answer 1

在这种情况下，需要“必需”父指令来跟踪子指令。在类似 Accordion 的示例中，父指令将代表 Accordion ，每个子指令将代表 Accordion 的每个部分:

.directive("formAccordion", function(){
  return {
    controller: function(){
      var self = this;
      self.addSection = function(sectionCtrl, sectionElement){
        // ..
      }
      // ..
    }
  }
})

.directive("formSection", function(){
  return {
    require: ["formSection", "^formAccordion"],
    controller: function(){
      var self = this;
      self.close = function(){
        // ..
      }
      // ..
    },
    link: function(scope, element, attrs, ctrls){
       var section =  ctrls[0],
           parent = ctrls[1];
       parent.addSection(section, element);
    }
  }
})

formAccordion 可以跟踪每个部分并管理打开/关闭请求。 formSection 可以在表单完成时通知父级(并且需要打开“下一个”部分)，而无需对“下一个”的概念以及它是否存在的部分做出任何假设。