Directive AngularJS liant une fonction avec plusieurs arguments

J’ai du mal à lier une fonction définie dans un contrôleur avec une fonction de rappel dans une directive. Mon code ressemble à ceci:

Dans mon contrôleur:

$scope.handleDrop = function ( elementId, file ) { console.log( 'handleDrop called' ); } 

Alors ma directive:

 .directive( 'myDirective', function () { return { scope: { onDrop: '&' }, link: function(scope, elem, attrs) { var myFile, elemId = [...] scope.onDrop(elemId, myFile); } } ); 

Et dans ma page HTML:

  

Ne pas avoir de chance avec le code ci-dessus. D’après ce que j’ai lu dans divers tutoriels, je comprends que je suis censé spécifier les arguments dans la page HTML?

Il y a une petite erreur dans votre code, veuillez essayer le code ci-dessous et cela devrait fonctionner pour vous

 < !doctype html>       

Méthode alternative qui survivra à la minification

laissez votre code HTML tel qu’il était:

  

changer l’appel à:

 scope.onDrop()('123','125') 

notez les parenthèses d’ouverture et de fermeture supplémentaires données à onDrop. Cela va instancier la fonction au lieu d’injecter le code de la fonction.

Pourquoi est-ce mieux

  1. changer les noms des parameters dans la définition handleDrop () (ou même en append, si vous le manipulez correctement) ne vous fera pas changer chaque injection de directives dans le HTML. beaucoup DRYER.

  2. Comme @TrueWill l’a suggéré, je suis presque sûr que les autres solutions ne survivront pas à la minification, alors que le code rest avec un maximum de flexibilité et qu’il est indépendant du nom.

Une autre raison personnelle est la syntaxe de l’object, ce qui me fait écrire beaucoup plus de code:

 functionName({xName: x, yName: y}) 

(et ajout de la signature de fonction dans chaque appel direct)

comme opposé à

 functionName()(x,y) 

(pas de maintenance sur votre HTML)

J’ai trouvé cette excellente solution ici .

J’espère que cela pourra aider!