2016-09-21 3 views
0

私はこのdocを通過しています。私が持っている混乱は、link.apply(this、attrs)の 'this'です。助けてもらえますか?角度デコレータで 'これ'とは何ですか?

$provide.decorator('fooDirective', function($delegate) { 
    var directive = $delegate[0]; 

    directive.scope.fn = "&"; 
    var link = directive.link; 

    directive.compile = function() { 
     return function(scope, element, attrs) { 
     link.apply(this, arguments); 
     element.bind('click', function() { 
      scope.$apply(function() { 
      scope.fn(); 
      }); 
     }); 
     }; 
    }; 

    return $delegate; 
    }); 
}); 

コンソールデバッガを使用してデバッグしようとすると、リンク機能が実行されている間は 'this'が定義されていません。

+0

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply – Sai

答えて

1

角度デコレータには特別なthisというコンテキストがないため、ルーズモードではwindow、厳密モードではundefinedとなります。ネストされた関数で

this

は、角度指令で行われ得る、非語彙的文脈を参照することができる:compile機能this

directive.compile = function() { 
    // `this` is directive DDO in compile function 
    return function(scope, element, attrs) { 
    // `this` is `undefined` in link function 
    ... 
    }; 
}; 

ディレクティブDDOあります。 controllerの機能thisはコントローラインスタンスです。 linkには語彙はありませんthisです。

link.apply(this, arguments)は安全に再生しようとしていますが、ここでは誤解を招くだけです。代わりにlink.apply(null, arguments)かもしれません。

0

新しいリンク関数を返すコンパイル関数を作成する必要があります。
そこには、古いリンク機能でapply(最初のパラメータとして関数自体を渡す)を呼び出して古い機能を取得します。
この設定では、余分な動作を追加するだけです(この場合、clickイベントをクリック時に新しい関数を呼び出す要素にバインドします)。

関連する問題