0

私はES6で書かれたクラスを持っていて、「selected」と呼ばれるコントローラー値にアクセスする必要があるディレクティブ「action」を持っています。この「選択された」コントローラー値は、別のディレクティブ「grid」によって更新されます。(2ウェイバインディング)

ディレクティブ「グリッド」によって更新されたコントローラーから「選択された」値をディレクティブ「アクション」 on-select に渡す必要があります。「バインド」を実行して渡そうとしましたが、「undefined の actionHandler を読み取れません」というタイプ エラーが発生します。

「選択された」値が「グリッド」ディレクティブによって更新されたときに、コントローラーからの更新された値で 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ます。
  • 2 番目の呼び出しはすぐに機能しますが、この呼び出しのコンテキスト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 に答える