6

我来自 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>

这行得通。单击divin时将记录到控制台。但是，如果我将回调更改为传递范围内的某些内容（甚至只是一个文字，例如）并更改为接受一个参数，该参数是. 我的猜测是我必须以某种方式传递数据，但我不知道如何。有没有办法通过中间组件传递参数而不必在范围内编写包装函数？我试过使用，但这不起作用——是否有一些 Angular 方法来完成我想要的？leaf'Foooooo!'ngClickleaf'foo'doSomethingapp.jsundefinednodearguments

编辑：

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

4

1 回答 1

5

编辑：这可能会或可能不会真正起作用......

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

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>
于 2016-05-09T21:10:51.090 回答