Angular 组件语法，使用错误上下文调用的回调函数

Posted 2023-02-23

【中文标题】Angular 组件语法，使用错误上下文调用的回调函数

【英文标题】：Angular component syntax, callback function called with wrong context

【发布时间】：2016-04-07 12:41:33

【问题描述】：

我正在使用 NG6-Starter 样板开发一个 Angular 应用程序。

现在，我有一个组件，其中包含另一个组件，并且我正在通过属性向内部组件发送回调函数。这就是我初始化内部组件的方式：

<div>
<location-form location='vm.location' submit-callback='vm.addLocation'>
</location-form>
</div>

父控制器上的addLocation 函数被调用，但问题是它被调用时this 是子组件（位置形式）的控制器。

我尝试使用绑定，但 Angular 有问题。 有什么想法吗？

组件定义：

import template from './locationForm.html';
import controller from './locationForm.controller';
import './locationForm.styl';

let locationFormComponent = 
  restrict: 'E',
  bindings: 
    location: '=',
    submitCallback: '=',
    parentController: '='
  ,
  template,
  controller,
  controllerAs: 'vm'
;

export default locationFormComponent;

控制器：

<form ng-submit="vm.submitCallback(vm.location)">
     ...
      <button type="submit" class="btn btn-default">Submit</button>
</form>

谢谢， 乌里

【问题讨论】：

你能发布你的指令代码吗？

已添加。现在我通过将父控制器作为道具传递来解决它

如果您希望您的指令具有与其父级相同的父级控制器/范围 (vm)，您可以定义 scope: false

控制器代码是？..

控制器并不真正相关，因为被调用的函数是从视图调用的，它是回调函数

【参考方案1】：

我也有同样的问题。到目前为止，对我有用的解决方案是将范围传递给组件/指令，然后使用 apply 确保它以正确的范围调用回调。