Angular 1.5中的多级组件回调

Question

我从一个反应,和/ 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'),并改变doSomething在app.js采取一种说法,说法是undefined.我的猜测是我必须以某种方式传递数据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>