Multi-Level Component Callbacks in Angular 1.5

Question

Ich komme aus einer React/Redux Denkweise, wo Datenmanipulation Funktionen sowie Daten von Eltern zu Kind an Enkel etc. weitergegeben werden. Komponenten selbst nicht Daten ändern, sondern sie übergeben ihre Absichten sichern den Komponentenbaum.

Ich versuche, dies mit Komponenten in Angular 1.5 zu replizieren. Betrachten Sie das folgende:

app.js:

const appController = ($scope, data) => { 
    $scope.doSomething =() => console.log('Foooooo!'); 
}; 

app.html:

<div> 
    <node 
    do-something="doSomething()" 
    ></node> 
</div> 

node.js:

app.component('node', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

node.html:

leaf.js:

app.component('leaf', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

leaf.html:

<div ng-click="$ctrl.doSomething()"></div> 

Dies funktioniert. Wenn div in leaf geklickt wird, wird 'Foooooo!' auf der Konsole protokolliert. Allerdings, wenn ich den ngClick Rückruf ändern, um etwas in Geltungsbereich für leaf (oder auch nur ein Literal wie) übergeben und doSomething in app.js ändern, um ein Argument zu nehmen, das Argument ist undefined. Meine Vermutung ist, dass ich irgendwie die Daten in node weitergeben muss, aber ich weiß nicht wie. Gibt es eine Möglichkeit, Argumente entlang zwischengeschalteter Komponenten zu übergeben, ohne Wrapperfunktionen in den Bereich schreiben zu müssen? Ich habe versucht, arguments zu verwenden, aber das funktioniert nicht - gibt es einige Winkelweise zu erreichen, was ich will?

EDIT:

Plunkr: https://plnkr.co/edit/7L4Kd3rhJXoGlrHzecHf?p=preview

Answer 1

EDIT: Dies kann oder auch nicht wirklich funktionieren ...

Es erscheinen würde, als ob, wenn Sie eine Funktion aufrufen, die zur Verfügung gestellt wurde mit dem Operator &, dass Sie die Funktion nicht direkt aufrufen, sondern eine Funktion aufrufen, die ihr Argument als eine Art Kontext für den Ausdruck verwendet.Die folgenden Werke:

app.js:

const appController = ($scope, data) => { 
    $scope.doSomething = value => console.log(value); 
}; 

app.html:

<div> 
    <node 
    do-something="doSomething(value)" 
    ></node> 
</div> 

node.js:

app.component('node', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

node.html:

<div> 
    <leaf 
    do-something="$ctrl.doSomething({ value: value })" 
    ></leaf> 
</div> 

leaf.js:

app.component('leaf', { 
    // ... 
    bindings: { 
    doSomething: '&', 
    }, 
}); 

leaf.html:

<div ng-click="$ctrl.doSomething({ value: someVar })"></div>