Qual é a melhor maneira de passar funções entre componentes internos no AngularJS 1.5?
Eu queria saber qual é a melhor maneira de passar funções através de 2 ou mais níveis de componentes? Não existe uma maneira simples de pular a quebra de função ao usar as ligações '&'?
Aqui está um caso de uso:
angular.module('app', []).component('app', {
controller: class AppController {
doSomething (data) {}
},
template: `
<sub-component on-do-something="$ctrl.doSomething(data)">
</sub-component>
`
})
ps: estou usando o ngRedux, então esse cenário é muito comum
EDITAR:
O problema é: para que o código acima funcione, cada controlador de componente interno ficaria assim:
.component('subComponent', {
bindings: {
doSomething: '&'
},
controller: function SubComponentController () {
this._doSomething = param => this.doSomething({data: param});
},
template: `
<inner-component do-something="$ctrl._doSomething(data)">
</inner-component>
`
});
.component('innerComponent', {
bindings: {
doSomething: '&'
},
controller: function InnerComponentController () {
this._doSomething = param => this.doSomething({data: param});
},
template: `
<sub-inner-component do-something="$ctrl._doSomething(data)">
</sub-inner-component>
`
});
E então eu teria que passar_doSomething
ao invés dedoSomething
diretamente.
ps: eu não estou usando transclusão aqui