指令之间似乎有很多通信方式。假设您有嵌套指令,内部指令必须将某些内容传递给外部指令(例如,它是由用户选择的)。
<outer>
<inner></inner>
<inner></inner>
</outer>
到目前为止,我有5种方法
require:
家长指令
该inner
指令可以要求该outer
指令,该指令可以在其控制器上公开某些方法。所以在inner
定义中
require: '^outer',
link: function(scope, iElement, iAttrs, outerController) {
// This can be passed to ng-click in the template
$scope.chosen = function() {
outerController.chosen(something);
}
}
在outer
指令的控制器中:
controller: function($scope) {
this.chosen = function(something) {
}
}
$emit
事件
该inner
指令可以$emit
一个事件,该outer
指令可以通过响应,$on
。因此,在inner
指令的控制器中:
controller: function($scope) {
$scope.chosen = function() {
$scope.$emit('inner::chosen', something);
}
}
并在outer
指令控制器中:
controller: function($scope) {
$scope.$on('inner::chosen, function(e, data) {
}
}
通过执行父作用域中的表达式 &
该项目可以绑定到父作用域中的表达式,并在适当的时候执行它。HTML将像:
<outer>
<inner inner-choose="functionOnOuter(item)"></inner>
<inner inner-choose="functionOnOuter(item)"></inner>
</outer>
因此,inner
控制器具有可以调用的“ innerChoose”功能
scope: {
'innerChoose': '&'
},
controller: function() {
$scope.click = function() {
$scope.innerChoose({item:something});
}
}
这将在outer
指令的范围内调用(在这种情况下)“ functionOnOuter”函数:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
非隔离范围上的范围继承
鉴于这些是嵌套的控制器,范围继承可以起作用,并且内部指令可以调用范围链中的任何函数(只要它没有隔离的范围)。因此,在inner
指令中:
// scope: anything but a hash {}
controller: function() {
$scope.click = function() {
$scope.functionOnOuter(something);
}
}
并在outer
指令中:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
通过服务注入内部和外部
可以将服务注入到这两个指令中,因此它们可以直接访问同一对象,也可以调用函数来通知该服务,甚至可以在发布/订阅系统中注册自己以进行通知。这不需要将指令嵌套。
问题:彼此之间有哪些潜在的弊端和优势?