Parece que hay varias formas de comunicación entre las directivas. Supongamos que tiene directivas anidadas, donde las directivas internas deben comunicar algo a las externas (por ejemplo, el usuario lo ha elegido).
<outer>
<inner></inner>
<inner></inner>
</outer>
Hasta ahora tengo 5 formas de hacer esto
require:
directiva principal
La directiva inner
puede requerir la directiva outer
, que puede exponer algún método en su controlador. Así que en la definición 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);
}
}
Y en el controlador de la directiva outer
:
controller: function($scope) {
this.chosen = function(something) {
}
}
$emit
evento
La directiva inner
puede $emit
un evento, al que la directiva outer
puede responder, a través de $on
. Así que en el controlador de la directiva inner
:
controller: function($scope) {
$scope.chosen = function() {
$scope.$emit('inner::chosen', something);
}
}
y en el controlador de directivas outer
:
controller: function($scope) {
$scope.$on('inner::chosen, function(e, data) {
}
}
Ejecutar expresión en el ámbito principal, a través de &
El elemento puede vincularse a una expresión en el ámbito principal y ejecutarlo en un punto apropiado. El HTML sería como:
<outer>
<inner inner-choose="functionOnOuter(item)"></inner>
<inner inner-choose="functionOnOuter(item)"></inner>
</outer>
Entonces el controlador inner
tiene una función 'innerChoose' que puede llamar
scope: {
'innerChoose': '&'
},
controller: function() {
$scope.click = function() {
$scope.innerChoose({item:something});
}
}
que llamaría (en este caso) la función 'functionOnOuter' en el alcance de la directiva outer
:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Herencia de alcance en alcance no aislado
Dado que estos son controladores anidados, la herencia del alcance puede estar en funcionamiento, y la directiva interna puede simplemente llamar a cualquier función en la cadena de alcance, siempre que no tenga un alcance aislado). Así que en la directiva inner
:
// scope: anything but a hash {}
controller: function() {
$scope.click = function() {
$scope.functionOnOuter(something);
}
}
Y en la directiva outer
:
controller: function($scope) {
$scope.functionOnOuter = function(item) {
}
}
Por servicio inyectado en interior y exterior
Se puede inyectar un servicio en ambas directivas, de modo que puedan tener acceso directo al mismo objeto, o llamar a funciones para notificar al servicio, y tal vez incluso registrarse para ser notificados, en un pub / subsistema. Esto no requiere que las directivas estén anidadas.
Pregunta : ¿Cuáles son los posibles inconvenientes y ventajas de cada uno sobre los demás?