AngularJS子组件向父组件传值报错：Cannot use 'in' operator

这个错误我之前碰到过，核心是对AngularJS组件中&类型绑定的使用方式理解有误。&绑定的是一个表达式而非直接的函数调用，调用子组件的绑定函数时，需要以键值对对象的形式传递参数，AngularJS才能正确将参数映射到父组件的表达式上下文中。

错误点拆解 #

1. 子组件调用方式错误：你直接传递了原始值$ctrl.keyword，但&绑定期望接收包含参数名和对应值的对象，直接传值会让AngularJS把字符串当成对象解析，从而出现Cannot use 'in' operator to search for '$ctrl'的错误。
2. 父组件表达式未接收参数：父组件的on-search="$ctrl.onSearch()"没有声明要接收子组件传递的参数，导致参数无法正确映射到父组件方法中。

修正后的完整代码实现 #

1. 子组件模板（search.template.html）

修改按钮点击逻辑，将参数包装为对象传递：

<div>
  <input ng-model="$ctrl.keyword" />
  <button ng-click="$ctrl.onSearch({ keyword: $ctrl.keyword })">Search</button>
</div>

2. 父组件模板（form.template.html）

在绑定表达式中声明要接收的参数，并传递给父组件方法：

<div>
  <search on-search="$ctrl.onSearch(keyword)"></search>
</div>

3. 父组件控制器（form.component.js）

同时修正构造函数的语法错误（原代码缺少括号）：

class FormComponentController {
  constructor() {} // 修正构造函数语法
  onSearch(keyword) {
    console.log(keyword); // 现在能正确拿到子组件传递的值
    // 执行你的业务逻辑
  }
}
angular
.module('app')
.component('form', {
  templateUrl: 'form.template.html',
  controller: [FormComponentController]
});

为什么这样能解决问题？ #

&绑定本质是让子组件触发父组件的表达式，传递的对象（比如{ keyword: $ctrl.keyword }）会将键作为变量名，在父组件的表达式上下文中生效。父组件的$ctrl.onSearch(keyword)就能把这个变量值传递给控制器的方法，整个参数传递流程就正确了。

更优实现思路 #

对于直接的父子组件通信，&绑定是最清晰的方案——它明确声明了组件间的通信契约，耦合度低。如果是更复杂的跨组件通信，才需要考虑AngularJS的$emit/$broadcast事件系统，但你的场景用&绑定完全足够。

内容的提问来源于stack exchange，提问作者Jon