多个、不重复的angular指令在父作用域中被跟踪

Multiple, non-repeated angular directives tracked in parent scope

本文关键字:作用域 跟踪 指令 angular 多个      更新时间:2023-09-26

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

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

1)它可以作为一个部分进行验证(例如,属于myDirective的每个元素都被验证,但表单上的其他元素不被验证)。

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

myDirective获取它指定的节点,并将其包装在一个div中,并根据两个可能的触发器来"展开"answers"折叠"该部分:

1)点击指定的"触发器"元素,如"展开"或"折叠"按钮

2)改变MyController的属性,然后触发元素展开或折叠。

以下也是要求:

1)一次只能打开一个节(默认都是关闭的)

2)节不能"关闭"(例如,不能从一个节跳转到另一个节),除非首先是"有效的"

考虑到这些要求,我的问题如下:

如何在这里尊重"关注点分离"?在我看来,因为这些指令不知道任何关于他们的邻近指令(甚至不是他们的$索引,因为这不是重复的),他们必须"注册"与MyController,以便能够协调他们的行动。

但是这会引入一整套控制器指令交互,使它们完全相互依赖。我明白让他们完全不了解对方是一种理想状态,但不仅存在指令与控制器之间的通信,而且还存在控制器-指令-控制器-指令之间的通信。例如,如果一个指令注意到用户准备通过一些用户操作切换到它(例如完成一个表单部分或点击另一个部分的展开触发器),那么它必须通知目标部分关闭,通过控制器注册的部分指令。但即便如此,事情也不那么简单:必须检查关闭指令的有效性,如果它无效,则需要取消整个流程,直到用户修复他们的工作。如果没有问题,那么我们回到原来的指令,告诉它可以关闭,然后打开新的目标部分。

长话短说,这里有很多依赖的功能。理想情况下,会有一些跟踪数组和一个属性,说明哪个部分在控制器上是活动的,但是当涉及到暴露在这种情况下似乎越来越多的代码控制器和指令之间时,我感到恶心。

所以,如果你之前错过了:如何在这里尊重"关注点分离"?

感谢阅读!!

在这种情况下,需要一个"required"父指令来跟踪子指令。在类似手风琴的示例中,父指令将表示手风琴,而每个子指令将表示手风琴的每个部分:

.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可以跟踪每个区段并管理open/close请求。formSection可以在表单完成(并且"next"部分需要打开)时通知父节点,而无需对"next"的概念以及是否存在"next"部分进行任何假设。