Parece haver algumas maneiras de se comunicar entre diretivas. Digamos que você tenha diretivas aninhadas, em que as diretivas internas devem comunicar algo ao exterior (por exemplo, ele foi escolhido pelo usuário).
<outer>
<inner></inner>
<inner></inner>
</outer>
Até agora eu tenho 5 maneiras de fazer isso
require:
parent directive
A diretiva inner
pode exigir a diretiva outer
, que pode expor algum método em seu controlador. Então, na definição 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);
}
}
E no controlador da diretiva outer
:
controller: function($scope) {
this.chosen = function(something) {
}
}
$emit
event
A diretiva inner
pode $emit
um evento, ao qual a diretiva outer
pode responder, via $on
. Portanto, no controlador da diretiva inner
:
controller: function($scope) {
$scope.chosen = function() {
$scope.$emit('inner::chosen', something);
}
}
e no controlador de diretivas outer
:
controller: function($scope) {
$scope.$on('inner::chosen, function(e, data) {
}
}
Executa a expressão no escopo pai, via &
O item pode se ligar a uma expressão no escopo pai e executá-lo em um ponto apropriado. O HTML seria como:
<outer>
<inner inner-choose="functionOnOuter(item)"></inner>
<inner inner-choose="functionOnOuter(item)"></inner>
</outer>
Portanto, o controlador inner
tem uma função 'innerChoose' que pode chamar
scope: {
'innerChoose': '&'
},
controller: function() {
$scope.click = function() {
$scope.innerChoose({item:something});
}
}
que chamaria (neste caso) a função 'functionOnOuter' no escopo da diretiva outer
:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Herança do escopo no escopo não isolado
Dado que estes são controladores aninhados, a herança do escopo pode estar no trabalho, e a diretiva interna pode apenas chamar qualquer função na cadeia do escopo, desde que não tenha um escopo isolado). Então, na diretiva inner
:
// scope: anything but a hash {}
controller: function() {
$scope.click = function() {
$scope.functionOnOuter(something);
}
}
E na diretiva outer
:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Por serviço injetado no interior e exterior
Um serviço pode ser injetado em ambas as diretivas, para que eles possam ter acesso direto ao mesmo objeto, ou chamar funções para notificar o serviço, e talvez até se registrarem para serem notificados, em um sistema de pub / sub. Isso não requer que as diretivas sejam aninhadas.
Pergunta : Quais são os potenciais inconvenientes e vantagens de cada um sobre os outros?