AngularJS模态框传递函数时this指向错误问题求助

这是个典型的JavaScript函数上下文绑定问题，别担心，很容易搞定！

问题根源 #

当你在resolve里直接传递() => this.parentOnChange时，虽然用了箭头函数包裹，但返回的this.parentOnChange本身是普通函数，当它在模态框控制器中被调用时，函数内部的this会自动指向当前执行上下文（也就是模态框控制器实例），而非你期望的父控制器实例，所以才会出现this.oneFunction is not a function的错误。

解决方案 #

这里有两种可靠的解决方式，你可以根据习惯选择：

方案1：用箭头函数包装调用（推荐）

在resolve里直接用箭头函数调用父控制器的parentOnChange，箭头函数会自动捕获父控制器的this上下文，确保调用时this指向正确：

private openContextMenu(object: MyInterface) {
  const modal = this.$uibModal.open({
    component: 'myContextMenuModal',
    resolve: {
      object: () => object,
      onChange: () => (obj: MyInterface) => this.parentOnChange(obj) // 返回绑定好上下文的箭头函数
    }
  });
}

方案2：提前绑定函数上下文

在父控制器的构造函数中，把parentOnChange方法手动绑定到当前的this，这样无论在哪里调用这个函数，this都会固定指向父控制器实例：

constructor( private readonly $uibModal: IModalService ) {
  // 手动绑定上下文，确保this始终指向父控制器
  this.parentOnChange = this.parentOnChange.bind(this);
}

private openContextMenu(object: MyInterface) {
  const modal = this.$uibModal.open({
    component: 'myContextMenuModal',
    resolve: {
      object: () => object,
      onChange: () => this.parentOnChange // 现在可以直接传递函数引用了
    }
  });
}

模态框代码无需修改 #

你的模态框控制器代码是没问题的，只要父控制器那边正确绑定了上下文，调用this.onChange(this.object)时就会正确触发父控制器的parentOnChange，并且内部的this.oneFunction()和this.twoFunction(object)都能正常执行。

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