Modèle de directive

En général, vos directives doivent utiliser la portée isolée (ce que vous avez fait correctement) et utiliser l`étendue de type` = `si vous souhaitez qu`une valeur de votre directive soit toujours mappées à une valeur dans l`étendue parente. Vous pouvez voir que l`utilisation de la directive NgModel, et nous pouvons faire la liaison de données bidirectionnelle. Vous n`avez besoin que de ng-Model lorsque vous avez besoin d`accéder au $viewValue ou $modelValue du modèle. Voir NgModelController. Et dans ce cas, vous utiliserait exiger: ` ^ ngModel`. Si nous examinons le code source, nous remarquons que ngModel est livré avec une liaison de propriété. La liaison de propriété [ngModel] prend en charge la mise à jour de l`élément DOM d`entrée sous-jacent. Angulaire permet la syntaxe abrégée à l`aide de [()], également appelé «banane dans une boîte». Donc, après tout, c`est un détail d`implémentation de ngModel qui permet la liaison de données bidirectionnelle. Ce n`est pas si compliqué: dans votre dirctive, utilisez un alias: Scope: {alias: ` = ngModel`} vous pouvez utiliser la directive du modèle v pour créer des liaisons de données bidirectionnelles sur les éléments Input, textarea et SELECT.

Il sélectionne automatiquement la bonne façon de mettre à jour l`élément en fonction du type d`entrée. Bien qu`un peu magique, v-Model est essentiellement le sucre de syntaxe pour la mise à jour des données sur les événements d`entrée utilisateur, plus un soin spécial pour certains cas de bord. C`est une réponse peu tardive, mais j`ai trouvé ce post impressionnant sur NgModelController, qui je pense est exactement ce que vous cherchez. Exemple de directive d`angle NgModel tutoriel est le sujet principal d`aujourd`hui. La directive ng-Model lie la valeur des contrôles HTML (entrée, Select, textarea) aux données d`application. En utilisant la liaison bidirectionnelle, nous pouvons afficher une propriété de données ainsi qu`une mise à jour de cette propriété lorsque l`utilisateur effectue des modifications. Nous pouvons simplement l`atteindre dans l`élément de composant ainsi que l`élément HTML à la fois. La liaison bidirectionnelle utilise la syntaxe en tant que [()] ou bind-Keyword.

La liaison bidirectionnelle utilise la syntaxe de liaison de propriété et de liaison d`événements ensemble. La liaison de propriété utilise la syntaxe en tant que bracket [] ou bind-et la liaison d`événement utilise la syntaxe comme parenthèse () ou sur-et ces liaisons sont considérées comme une liaison à sens unique. Les travaux de liaison bidirectionnelle dans les deux directions sont la définition de la valeur et l`extraction de la valeur. La liaison bidirectionnelle utilise un modèle de nom spécifique. Actuellement, la directive v-Model ne prend pas en charge les liaisons de type moustache pour les expressions de liaison, mais cette fonctionnalité serait extrêmement utile pour créer des impléenetations comme des constructeurs de formulaires. Enfin, le didacticiel d`exemple de directive d`angle NgModel est terminé. OK, donc pour travailler correctement liaison de données bidirectionnelle avec ngModel, nous devons écrire le code suivant à l`intérieur du fichier app. Component. html. J`essaie de créer une directive qui créerait un champ de saisie avec le même modèle ng que l`élément qui crée la directive. Salut, j`ai une question vue liée à ce sujet-„dynamique v-modèle de directive”: la raison interpolée bind est utile est l`endroit où vous construisez des entrées imbriquées dynamiques où vous ne pouvez pas „code dur” le chemin parent (par exemple „animal.

Dog”) dans la directive je ne pouvais pas trouver le chemin pour accéder dynamiquement à la propriété calculée dans la directive du modèle v. Il n`y a aucun moyen pour moi d`accéder à mes propriétés calculées que vous pouvez accéder aux propriétés de données avec v-Model = „$data [quelque chose]” TL; DR-vous pouvez utiliser exiger: `ngModel`, puis ajouter NgModelController à votre fonction de liaison: la création d`une portée isolable n`est pas souhaitable. Je voudrais éviter d`utiliser l`attribut scope et faire quelque chose comme ça. Scope: true vous donne une nouvelle portée enfant, mais pas isoler. Ensuite, utilisez parse pour pointer une variable d`étendue locale vers le même objet que l`utilisateur a fourni à l`attribut ngModel. Juste pour être clair, je suis contre l`idée de permettre des interpolations à l`intérieur des expressions de directive. À l`heure actuelle moustaches signifie que le résultat évalué est censé être une chaîne et utilisé comme une chaîne (à insérer dans le DOM, ou faire une recherche d`ID).