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>

这行得通。当单击leaf 中的div 时，'Foooooo!' 会记录到控制台。但是，如果我将ngClick 回调更改为传递leaf 范围内的某些内容（或者甚至只是诸如'foo' 之类的文字）并更改app.js 中的doSomething 以获取参数为@987654343 @。我的猜测是我必须以某种方式在node 中传递数据，但我不知道如何。有没有办法通过中间组件传递参数而不必在范围内编写包装函数？我试过使用 arguments 但这不起作用 - 有没有一些 Angular 方法来完成我想要的？

编辑：

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

Answer 1

编辑：这可能真的有效，也可能无效...

当您调用一个由& 运算符提供的函数时，您似乎不是直接调用该函数，而是调用一个使用其参数作为表达式上下文的函数。以下作品：

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>