angularjs - Angular 1.5 のマルチレベル コンポーネント コールバック

Question

私は、データ操作機能やデータが親から子、孫などに渡される React / Redux の考え方から来ています。コンポーネント自体はデータを変更するのではなく、意図をコンポーネント ツリーに戻します。

これを Angular 1.5 のコンポーネントで複製しようとしています。次の点を考慮してください。

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>

これは機能します。divインleafをクリックする'Foooooo!'と、コンソールにログが記録されます。ただし、ngClickコールバックを変更してスコープ内の何かleaf(または のような単なるリテラル) を渡すように変更し、その引数が である引数を取るように'foo'変更します。どうにかして でデータを渡す必要があると思いますが、方法がわかりません。スコープ内にラッパー関数を記述せずに、中間コンポーネントに沿って引数を渡す方法はありますか? 私は使ってみましたが、うまくいきません - 私が望むことを達成するAngularの方法はありますか?doSomethingapp.jsundefinednodearguments

編集：

プランク: https://plnkr.co/edit/7L4Kd3rhJXoGlrHzecHf?p=preview