Qual è il modo migliore per passare le funzioni tra i componenti interni in AngularJS 1.5?

Question

Mi chiedevo qual è il modo migliore per passare le funzioni attraverso 2 o più livelli di componenti? Non esiste un modo semplice per saltare la funzione quando si utilizzano i collegamenti "&"?

Ecco un caso d'uso:

angular.module('app', []).component('app', { 
    controller: class AppController { 
    doSomething (data) {} 
    }, 
    template: ` 
    <sub-component on-do-something="$ctrl.doSomething(data)"> 
    </sub-component> 
    ` 
}) 

ps: sto usando ngRedux, in modo tale scenario è molto comune

EDIT:

Il problema è: per il codice qui sopra per il lavoro , ogni controller di componente interno sarebbe simile a questo:

.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 quindi dovrei passare d proprio _doSomething anziché doSomething direttamente.

ps: io non sto usando inclusione qui

Answer 1

Non è necessario fornire una funzione wrapper nel controller del vostro sub-componenti. Utilizzando bindings una funzione viene automaticamente allegata al controller, che puoi chiamare direttamente dal tuo modello.

L'unica ruga è che questa funzione accetta un oggetto, che contiene i locals che saranno resi disponibili all'espressione nel template esterno.

In questo caso, la variabile data nel modello esterno deve essere fornita esplicitamente quando si chiama il metodo doSomething(locals).

angular.module('app', []) 

.component('app', { 
    controller: class AppController { 
    doSomething (data) { 
     console.log(data); 
    } 
    }, 
    template: ` 
    <sub-component do-something="$ctrl.doSomething(data)"> 
    </sub-component> 
    ` 
}) 

.component('subComponent', { 
    bindings: { 
     doSomething: '&' 
    }, 
    template: ` 
     <inner-component do-something="$ctrl.doSomething({data: data})"> 
     </inner-component> 
    ` 
}) 

.component('innerComponent', { 
    bindings: { 
     doSomething: '&' 
    }, 
    template: ` 
     <sub-inner-component do-something="$ctrl.doSomething({data: data})"> 
     </sub-inner-component> 
    ` 
}) 

.component('subInnerComponent', { 
    bindings: { 
    doSomething: '&' 
    }, 
    template: ` 
     <button ng-click="$ctrl.doSomething({data: 123})">Do Something</button> 
    ` 
}); 

Ecco un Plunker di lavoro: http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview