AngularJS 1.7父组件向子组件传递函数调用失败问题排查

你的思路完全可行——在AngularJS 1.x中通过&绑定传递父组件函数到子组件，并且在子控制器中调用是完全支持的。问题出在几个细节错误上，我帮你逐一梳理并修正：

1. 父控制器构造函数拼写错误 #

首先看你的ParentController，构造函数的拼写写错了：contructor → constructor。这个错误会导致依赖注入失效（$log无法被注入），虽然你提到console显示它是函数，但这个问题必须修正，避免后续出现其他异常：

export class ParentController {
  // 修正拼写错误
  constructor($log) {
    'ngInject';
    this.$log = $log;
  }
  print(message) {
    console.log(message);
    // 也可以用注入的$log：this.$log.log(message);
  }
}

2. 子组件调用&绑定函数的方式错误 #

在AngularJS中，&类型的绑定是将父作用域的表达式包装成一个函数。调用这个函数时，必须传入一个键值对对象，对象的键要和父组件绑定表达式里的参数名完全匹配。

你的父组件绑定表达式是functionToRun="$ctrl.print(message)"，这里的参数名是message，所以子控制器调用时需要传{ message: '你要传递的内容' }，而不是直接传字符串。另外不需要用call修改上下文，&绑定的函数已经自动绑定了正确的父组件上下文。

修正后的子控制器代码：

export class ChildController {
  constructor() {
    'ngInject';
  }
  $onInit() {
    // 正确调用方式：传入与父表达式参数名匹配的对象
    this.functionToRun({ message: 'hello' });
  }
}

3. 父组件HTML绑定的可选优化 #

虽然你当前的父组件写法<child functionToRun="$ctrl.print(message)"></child>是有效的，但可以更明确地标注参数来源，提升可读性（可选）：

<child functionToRun="$ctrl.print(message)"></child>
<!-- 或者更清晰的写法：明确参数是子组件传递的 -->
<child functionToRun="$ctrl.print(messageFromChild)"></child>
<!-- 此时子控制器调用要改成：this.functionToRun({ messageFromChild: 'hello' }); -->

验证修正效果 #

当你完成以上修正后，子控制器的$onInit执行时，就会正确调用父组件的print方法，并输出hello到控制台。

内容的提问来源于stack exchange，提问作者Eduardo F.C.P.