2017-12-22 10 views
1

をコントローラには下記された縮小さ例jqueryのUIグリッドコールバックデータを返す:アイデアがあるAngularJS 1.6 + ES6 - 、私は私のコントローラ内のjQuery UIグリッド・コンポーネントを定義してい

class myController { 
    constructor($scope) {   

     this.$scope = $scope; 

     this.Grid = {        

      selectionSettings:{ 
       clientHandler:function(key,object,data){ 
        console.log(key); 
        console.log(object); 
        console.log(data);      
        console.log(this); 
        return data;       
        //the scope of this function is different from the controller scope.       
        }    
      } 
     } 

     receiver(data){ 
      doSomething(data); 
     } 
    ... 

をグリッド内のエントリを選択すると、clientHandler内の関数が起動されることを示します。私はこの場合、にそのデータをこのクラスの受信機機能に渡します。

しかしが異なるスコープにあるこのclientHandler機能とreceiver()以来、私はthisキーワードを使用して直接、そうすることはできませんよ。

他の回答は、同じを達成するために$scopeオブジェクトを使用することをお勧めしますが、私はそうすることはできません。

関数の呼び出しに必要なものreceiver()

どのような指導も歓迎されます。

class dashboardController { 
    constructor(dashboardService, $scope) { 
     this.$scope = $scope;  

     var self = this; 

     this.Grid = { 

      selectionSettings:{     
       clientHandler:function(key,object,data){ 
        self.receiver(data);     
      }     
     } 

     receiver(data){ 
      this.selected = data; 
      this.$scope.$apply(); //to propagate the change to the UI, if needed 
     } 

    } 
+0

これは(自分で 'receiver'を呼び出します)、または' self'変数に 'this'を保存します(https://stackoverflow.com/questions/3309516/wh en-to-use-self-in-javascript)を使用します。 – Adelin

+0

それはうまくいった。ありがとうございました –

+0

ブラウザのコンソールで変更が表示されている間、私はUI上でcallbackHandlerによる変更を伝播できません。 '$ doCheck()'ライフサイクルフックを手動で反映させるために手動でコールしようとしていますが、違いはありません。どのライフサイクルフックがこの変更をUIに伝達できますか? –

答えて

0

おかげAdelinを

clientHandler: (key,object,data) => { 
    this.receiver(data); 
} 
1

ES6矢印機能がES6で、一般的に不要であるself = thisトリックを、字句thisを提供し、避けるために存在します:ヘッドアップ

ここでは、最終的な作業コードだのおかげで

+0

私はこれを試した - うまくいきませんでした。とにかくありがとう –

+0

「var self = this」はES6の反パターンです。矢印関数は、それを完全に置き換えるものとします。答えのコードはあなたが投稿したコードと同じです。 – estus

関連する問題