Je veux rendre un formulaire, basé sur une configuration de champ dynamique: ceci devrait émettre quelque chose qui se comporte comme: La mise en œuvre simple serait d'utiliser des instructions J'ai Se moquait d'un exemple à os nus de ce que j'essaie de faire ici: http://jsfiddle.net/gunnarlium/ AJ8G3 / 4 / Le problème est que les champs de formulaire ne sont pas liés au modèle, de sorte que les fichiers étendus.fields dans Soumettre () n'est pas mis à jour. Je soupçonne que le contenu de ma fonction de directive est tout à fait faux ... :) aller de l'avant, je dois également supporter d'autres types de champs, tels que les boutons radio, les cases à cocher, les cases, etc. si pour rendre les modèles pour chaque type de champ. Cependant, comme l'angulaire ne prend pas en charge si déclarations, je suis amené à la direction des directives. Mon problème est de comprendre comment fonctionne les travaux de liaison de données. Documentation pour les directives est un peu dense et théorique.
3 Réponses :
Le premier problème que vous utilisez quelle que soit la directive que vous essayez de créer utilise NG-répéter dans un formulaire avec des éléments de formulaire. Cela peut être difficile à faire pour la manière dont la répétition NG crée une nouvelle portée.
Cette directive crée une nouvelle portée. Je recommande également au lieu d'utiliser Element.html que vous utilisez ngswitch plutôt dans un modèle partiel. Cela vous laisse toujours avec le problème des éléments de formulaire de modification de la portée des enfants en raison de la répétition NG et de cela, je suggère d'utiliser la méthode NgChange sur chaque élément pour définir la valeur quand un élément a changé. C'est l'un des rares articles que je ne pense pas que Angularjs gère très bien la situation à cette époque.
En fait, ngswitch était exactement ce dont j'avais besoin. Pas de problèmes d'étendue rencontrés :) (Encore). Je ne comprends toujours pas bien les directives, mais c'est une tâche pour un autre jour ..
@Gunnarlium avez-vous pu résoudre ce problème? J'essaie de mettre en œuvre une solution similaire mais j'ai été bloquée à cause des mêmes problèmes exacts .. Se demander si vous pouvez partager vos idées si / comment avez résolu le problème
Vous pouvez envisager Metawidget pour cela. Il utilise le schéma JSON, mais est autrement très proche de votre cas d'utilisation. Exemple complet:
L'attribut code> type code> peut être modifié lorsque l'élément est hors du DOM, alors pourquoi pas une petite directive qui la supprime de dom, change de type, puis ajoutez au même endroit?
La montre p> $ code> est facultative, car l'objectif peut le modifier de manière dynamique et ne pas continuer à le changer. P>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MainCtrl">
<h2>Watching Type Change</h2>
Enter Type: <input ng-model="newType" /><br/>
Using Type (with siblings): <span>Before</span><input dynamic-input="{{newType}}" watch="true" /><span>After</span><Br>
Using Type (without siblings): <div><input dynamic-input="{{newType}}" watch="true" /></div>
<br/><br/><br/>
<h2>Without Watch</h3>
Checkbox: <input dynamic-input="checkbox" /><br />
Password: <input dynamic-input="{{ 'password' }}" value="password"/><br />
Radio: <input dynamic-input="radio" /><br/>
Range: <input dynamic-input="{{ rangeType }}" />
</div>
Dupliqué possible de angularjs: impossible de modifier le type d'entrée