Was ist der beste Weg, Funktionen zwischen inneren Komponenten in AngularJS 1.5 zu übergeben?

Question

Ich frage mich, was ist der beste Weg, um Funktionen über 2 oder mehr Ebenen von Komponenten zu übergeben? Es gibt keine einfache Möglichkeit, den Funktionswrap zu überspringen, wenn '&'-Bindungen verwendet werden?

Hier ist ein Anwendungsfall:

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

ps: Ich verwende ngRedux, so solches Szenario ist

EDIT sehr häufig:

Das Problem ist: für den obigen Code in Arbeit würde jeder innere Komponentencontroller wie folgt aussehen:

Und dann müsste ich d übergeben eigene _doSomething anstelle von doSomething direkt.

ps: Ich bin nicht hier Einbindung

Answer 1

Es ist nicht notwendig, eine Wrapper-Funktion in der Steuerung Ihrer Unterkomponente zu liefern. Mit bindings wird automatisch eine Funktion an den Controller angehängt, die Sie direkt aus Ihrer Vorlage aufrufen können.

Der einzige Knick ist, dass diese Funktion ein Objekt übernimmt, das die Locals enthält, die dem Ausdruck in der äußeren Vorlage zur Verfügung gestellt werden.

In diesem Fall muss die data Variable in der äußeren Vorlage explizit angegeben werden, wenn die Methode doSomething(locals) aufgerufen wird.

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> 
    ` 
}); 

Hier ist ein funktionierendes Plunker: http://plnkr.co/edit/QQF9jDGf6yiewCRs1EDu?p=preview