0

我有一个用 ES6 编写的类，我有一个指令“action”，它需要访问一个名为“selected”的控制器值。此控制器值“选定”由另一个指令“网格”更新。（2路绑定）

我需要将指令“grid”更新的控制器中的“selected”值传递给指令“actions” on-select 。我试图通过“绑定”来通过，但我收到一个类型错误，因为“无法读取未定义的 actionHandler”

我不确定处理此问题的最佳方法是什么，这样当“grid”指令更新“selected”值时，actionEvent 会使用来自控制器的更新值触发。这些指令工作正常，我可以看到它在断点处中断。

这是我在 HTML 中的内容

<div class="col-xs-9">          
   <action options="ctrl.Actions" on-select="ctrl.actionEvent">
   </action>
</div>
<div class="col-xs-12">
  <grid config="ctrl.gridOptions" data="ctrl.data" selected="ctrl.selected"></grid>
 </div>

在控制器中，

 class CheckC {
   constructor($scope) {
    this.$scope = $scope;       
    this.selected = this.$scope.selected;
  }

actionEvent() {
    this.actionHandler.bind(this);
}

actionHandler(item, event) {
    let selection;
    let model = this.selected;
    if(model) {
        item.id = 1;
    }
 }
 }
4

1 回答 1

4

首先，不要混淆.bind()和.call()。

  • First 返回一个新的函数实例，稍后可以调用它，但要保留this。
  • this 第二个调用立即起作用，但只为这个调用修改上下文。

阅读此答案以获取更多信息

您正在传递对actionEvent方法的引用。在调用的那一刻，对原始控制器对象的引用已经丢失。

要保留引用，您需要先将其保存在构造函数中

class CheckC {
  constructor($scope) {
    this.$scope = $scope;       
    this.selected = this.$scope.selected;
    //bind method here
    this.actionEvent = this.actionEvent.bind(this);
  }

  actionEvent(item, event) {
    // this here will be always contain a referene to class instance
    this.actionHandler(item, event);
  }

  actionHandler(item, event) {
    let selection;
    let model = this.selected;
    if(model) {
      item.id = 1;
    }
  }
}

同样在您的代码actionEvent方法中似乎是多余的。考虑重构代码并actionHandler直接通过。（别忘了更新.bind()调用，它应该actionHandler在之后绑定）。

于 2016-09-16T09:31:44.780 回答