Angular 1.5中的多级组件回调

Question

我来自React / Redux思维模式，其中数据操作函数以及数据从父级传递给子级到孙级等。组件本身不会修改数据，而是将它们的意图传递回组件树。 / p>

我试图用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'这样的文字）并更改doSomething中的app.js参数是undefined。我的猜测是我必须以某种方式在node中传递数据，但我不知道如何。有没有办法在中间组件中传递参数而不必在范围内编写包装函数？我尝试使用arguments，但这不起作用 - 是否有一些Angular方法可以实现我的目标？

修改

Plunkr：Android or Iphone

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>