多个、不重复的angular指令在父作用域中被跟踪
Multiple, non-repeated angular directives tracked in parent scope
这里有一个架构问题要问你。
假设我有一个包含表单的控制器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"部分进行任何假设。
- 监视函数从服务返回不起作用,但作用域函数起作用
- 将作用域存储在JSON中
- 从控制器继承了隔离的作用域以生成可重用的指令
- 从ng模板访问作用域
- 调用私有作用域
- 对父作用域的指令更新延迟了一步
- 正在$rootScope上达到控制器作用域$在内部控制器上
- 两个指令创建新的继承的和隔离的作用域-元素得到哪个
- 这两个关于 JavaScript 作用域链的例子有什么区别?
- 在具有命名作用域的自定义Polymer元素中隐藏表行
- AngularJS指令隔离作用域
- Angularjs:修改js中的作用域,稍后在页面中使用
- 访问多个指令的隔离作用域
- Javascript作用域和Ajax调用;工作不正常
- 向Angular作用域对象添加对象数组——TypeError
- ng重复中的ng模型-初始化唯一作用域属性
- 在put方法之前从作用域获取数据
- 如何在html中以角度显示自定义指令的作用域
- 当提供函数名称时,检查函数是否存在于同一作用域中
- 多个、不重复的angular指令在父作用域中被跟踪