Layered component callbacks in Angular 1.5

Question

I proceed from the React / Redux mentality where data processing functions as well as data are passed from parent to child to grandson, etc. The components themselves do not modify the data, but transfer their intentions back to the component tree.

I am trying to replicate this using components in Angular 1.5. Consider the following:

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 :

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

leaf.js :

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

leaf.html :

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

It works. When you click a div in the leaf 'Foooooo!' written to the console. However, if I modify the ngClick to pass something in the leaf (or even just a literal such as 'foo' ) and change doSomething in app.js to accept an argument whose argument is undefined . I assume that I need to somehow pass data to node , but I don't know how to do it. Is there a way to pass arguments on intermediate components without having to write shell functions in scope? I tried using arguments but that didn't work - is there any way Angular can accomplish what I want?

EDIT:

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

Answer 1

EDIT: This may or may not really work ...

It would seem that when you call a function that was provided by the & operator, you are not calling the function directly, but rather calling a function that uses its argument as a kind of context for expression. The following works:

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>