Javascript Girl
  1. Javascript Girl
  3. AngularJS – Transférer la portée avec les gammes enfants
Intereting Posts
Devrais-je m'abstenir de traiter le rejet de Promise de manière asynchrone? Calculer le chemin le plus court entre deux points géo? REST dans Parse $ in vers ObjectID de Pointer Code d'erreur 106 Comment puis-je publier une valeur de la zone de texte qui est créée dynamiquement par jquery Rendant le porteur de données HTML5 visible lorsque l'événement de mise au point se déclenche sur l'entrée Modèle Javascript: gestionnaire d'événements conditionnels Comment rayeter des liens avec des phantomjs Javascript: obtenez l'identifiant iframe dans la page chargée Traitez et continuez les sessions node.js / express Convertir un tableau de javascript multidimensionnel en JSON? Guidons / Moustache – Existe-t-il une manière intégrée de parcourir les propriétés d'un objet? Comment puis-je exécuter une fonction JavaScript définie par la page à partir d'une extension Firefox? Revenez à la ligne précédente en script avec debtoir devtools Un document.createElement, l'ajoute deux fois, ne s'affiche qu'une seule fois Meteor: montre quelque chose sur le clic de bouton

AngularJS – Transférer la portée avec les gammes enfants

J'ai un cas où je veux créer une directive réutilisable pour les formulaires modulaires, où il existe une directive de formulaire principale qui est destinée à être utilisée avec une combinaison de directives d'entrée de champ. Quelque chose comme ça: 

<form-container submit-path="/path/to/api/"> <input-field label="Foo"></input-field> <select-field label="Bar"></select-field> </form-container>

J'utiliserais un champ d'isolement sur le conteneur de formulaire, et il faudrait également créer un champ de travail pour les champs, mais je ne suis pas sûr de ce qu'il faut utiliser pour les champs. Je considère que la hiérarchie de l'étendue est quelque chose comme ceci: 

 - (1) form-container isolate scope - (2) form-container transcluded scope - (3) input-field scope - (4) select-field scope

La portée (1) aurait la fonction qui collecte et POST les données du formulaire, mais il aurait besoin d'accéder aux données liées aux éléments de formulaire dans les étendues (3) et (4).

Est-ce même possible?

Étant donné que la manière privilégiée serait de stocker le mode dans la portée (2), j'aurais besoin des champs pour être liés à différents noms de variables, mais il ne semble pas que je puisse interpoler sur le modèle ng avec l'attribut d'une directive. Edit: On dirait que je peux le faire manuellement dans une fonction de compilation? 2ème édition: une fois que ce bug est corrigé.

En outre, la fonctionnalité de soumission de formulaire n'a pas d'accès direct aux données dans la portée (2). Vous pouvez utiliser $$ nextSibling, mais apparemment c'est une mauvaise pratique.

Existe-t-il un moyen d'obtenir la portée (3) et (4) d'hériter directement de la portée (1)?

http://plnkr.co/edit/F1e1mKA2UU3EL1M9yaJ0?p=preview

C'est ce que j'ai essayé de l'atteindre avec l'utilisation du contrôleur de directive et laisser la directive enfant mettre à jour la valeur dans la directive parent bien que son contrôleur.

Je suis en train de voter sur cette question car je ne suis pas satisfait et je souhaite voir la meilleure solution.

J'ai trouvé une solution. Je l'ai posté ici comme une réponse à une nouvelle question, car je pensais que ma question originale était mal formulée.

Fondamentalement, vous n'avez pas besoin de faire un geste avec des étendues transbordées. Vous utilisez simplement une étiquette et un contrôleur ng sur le formulaire, ou une directive personnalisée qui attache une portée à la balise de formulaire.

Pour utiliser des valeurs dynamiques pour ng-model dans la directive, vous devez utiliser une fonction de lien pour modifier l'instance de la directive. Voir la solution pour tous les détails.