¿Cuál es la mejor manera de pasar funciones entre componentes internos en AngularJS 1.5?
Me preguntaba cuál es la mejor manera de pasar funciones a través de 2 o más niveles de componentes. ¿No hay una manera simple de omitir el ajuste de función cuando se usan enlaces '&'?
Aquí hay un 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: estoy usando ngRedux, por lo que este escenario es muy común
EDITAR:
El problema es: para que el código anterior funcione, cada controlador de componente interno se vería así:
.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>
`
});
Y luego tendría que pasar_doSomething
en lugar dedoSomething
directamente.
ps: no estoy usando transclusión aquí