Qu'est-ce que 'this' dans le décorateur angulaire?

Question

Je passe par ce doc, la confusion que j'ai est ce qui est 'ceci' dans link.apply (ceci, attrs). Quelqu'un peut-il aider?

$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; 
    }); 
}); 

lorsque je tente de le déboguer en utilisant le débogueur de la console, « ce » est pas défini en fonction de lien est en cours d'exécution.

Answer 1

Il n'y a pas de contexte spécial this dans le décorateur angulaire, donc il peut être window en mode lâche ou undefined en mode strict.

Dans les fonctions imbriquées this peut se référer au contexte non lexical, qui peut avoir lieu dans les directives angulaires:

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

En fonction compilethis est DDO directive. Dans controller la fonction this est une instance de contrôleur. Il n'y a aucune fonction lexicale this dans link.

link.apply(this, arguments) est une tentative de jouer en toute sécurité, mais ici, il est juste trompeur. Il peut être link.apply(null, arguments) à la place.

Answer 2

Vous devez créer une fonction de compilation qui renverra votre nouvelle fonction de lien.
À l'intérieur, vous appelez apply (en passant comme premier paramètre la fonction elle-même) dans l'ancienne fonction de lien pour obtenir l'ancienne fonctionnalité.
Avec cet ensemble, vous avez juste besoin d'ajouter le comportement supplémentaire (dans ce cas, vous liez l'événement click dans l'élément qui appellera la nouvelle fonction lors du clic).