Passer des méthodes dynamiques à une directive personnalisée en angulaire

Question

Je crée une directive personnalisée dans laquelle je dois attribuer une fonction à l'intérieur d'un objet qui sera utilisée lors du passage à ma directive.Cependant, si je passe la méthode en écrivant directement le nom de la fonction dans le modèle, cela fonctionne correctement.Mais si j'attribue cette référence de méthode à l'une de mes propriétés d'objet et que je l'utilise ensuite dans mon modèle pour la transmettre à la directive, mais cela ne fonctionne pas.

Vous pouvez voir ici - jsfiddle

Vous pouvez voir dans la console.Cliquez sur le bouton Enregistrer, il appellera la fonction de sauvegarde dans la directive mais à partir de là, j'appelle la méthode du contrôleur qui ne fonctionne pas.Mais si vous écrivez le nom de la fonction blabla plutôt dynamicMethods.myMethod alors il appellera mais en ce sens que j'ai reçu une alerte intérieure indéfinie.

Merci.

Answer 1

Vous aviez presque raison.

La première erreur a été lorsque vous avez défini dynamicMethods objet auquel vous faites référence $scope.blabla qui n'existait pas encore.

La deuxième erreur a été lorsque vous transmettez des valeurs au accept appel de fonction que vous avez lié à la portée parent, vous devez le transmettre comme :

$scope.accept({msg: "from dir"})

où msg est une variable locale nommée qui peut être utilisée dans la valeur d'expression de accept attribut sur votre appel de directive personnalisée <editkeyvalue accept="dynamicMethods.myMethod(msg)" ...

j'ai mis à jour ton violon par conséquent.

Quand tu écris accept: "&" tu dis à Angular de

1. utiliser $parse service pour analyser l'expression (dynamicMethods.myMethod(msg))
2. "lier" (par fermeture javascript) $scope de la fonction renvoyée de l'étape 1 à la portée d'origine (portée du contrôleur dans votre cas)
3. stocker la fonction à l'intérieur accept propriété de la portée locale de votre directive.

Maintenant, si vous inspectez le contenu de $scope.accept juste avant de l'appeler dans la directive, vous obtiendrez quelque chose de similaire à :

function (locals) {
  return parentGet(parentScope, locals);
}

où locals est un objet avec des variables locales utilisé lorsque nous atteignons l'évaluation de la fonction renvoyée par $parse.Puisqu'il n'y a pas de paramètres nommés en javascript et que nous ne voulons pas indiquer d'une manière ou d'une autre que la valeur de la variable locale msg est "from dir", nous le transmettons comme un simple objet où la clé indique le nom de la variable {msg: "from dir"}.

Angular examinera l'expression (une chaîne) pour évaluer et trouver que msg est entre parenthèses, il ressemble donc à un paramètre, dont la valeur peut être trouvée dans locals objet.

Quand vient le temps d'appeler la fonction réelle, angulaire se convertira locals objet dans un tableau régulier - en préservant l'ordre des paramètres qu'il lit à partir de l'expression et appelle la fonction d'une manière similaire à :

var locals = {msg: "from dir"};
var targetFn = dynamicMethods.myMethod;
var context = dynamicMethods;
targetFn.apply(context, ["from dir"]);

J'espère que cela aide un peu à comprendre ce qui se passe.