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

时间:2016-01-03 21:55:19

标签: javascript angularjs components ecmascript-6

我正在使用NG6-Starter样板制作角度应用。

现在,我有一个组件,里面有另一个组件,我正在通过一个属性向内部组件发送一个回调函数。这就是我初始化内部组件的方式:

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

调用父控制器上的addLocation函数,但问题是调用它是this作为子组件的控制器(位置形式)。

我尝试使用bind,但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>

谢谢, URI

1 个答案:

答案 0 :(得分:0)

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