2016-05-09 11 views
5

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.Multi-Level Component Callbacks in Angular 1.5

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

+0

lol, node.js. Das könnte verwirrend werden. Außerdem wäre ein Plunkr nett. – TomSlick

+0

Versuchen Sie, Ihre Bindung zu einem Verweis anstelle eines Ausdrucks zu machen, also anstelle von 'doSomething: '&'' 'doSomething: '='' und entfernen Sie die Klammern für das Knoten- und Blatt-Markup. – TomSlick

+0

könnten Sie den Code hinzufügen, den Sie versucht haben und der nicht funktioniert – rob

Antwort

4

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> 
+0

Dann sollten Sie Ihre eigene Antwort akzeptieren –

+0

KPthunder, wollen eine funktionierende Plunkr hinzufügen und diese Antwort für andere akzeptieren? – elliottregan

+0

Es stellt sich heraus, dass es eigentlich nicht so funktioniert, wie ich dachte. Ich komme von einem React-Hintergrund und ich habe versucht, eine Flussarchitektur in einem Angular-Projekt zu schüren, aber ich habe etwas anderes gemacht. – KPthunder