Question

我有一个用ES6编写的课程，我有一个指令＆＃34; action＆＃34;需要访问名为＆＃34; selected＆＃34;的控制器值。此控制器值＆＃34;已选择＆＃34;由另一个指令＆＃34; grid＆＃34;更新。（2路绑定）

我需要通过＆＃34;选择＆＃34;来自控制器的值已被Directive＆＃34; grid＆＃34;更新指令＆＃34;行动＆＃34;选择。我试图通过做一个＆＃34; bind＆＃34;但我得到一个类型错误，因为＆＃34;无法读取undefined＆＃34;

的actionHandler

我不确定处理这个问题的最佳方法是什么，这样当选择＆＃34;＆＃34;值已由＆＃34;网格＆＃34;更新指令，使用来自控制器的更新值触发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;
    }
 }
 }

Answer 1

首先，不要在.bind()和.call()之间感到困惑。

首先返回一个新的函数实例，可以稍后调用，但保留this。
第二次调用会立即执行，但会修改此this 的上下文

。

阅读this answer了解更多信息

您正在传递对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后绑定。

ES6类使用bind vs call调用类中的方法？

1 个答案: