Personnalisation du modèle dans une directive

J'ai un formulaire qui utilise le balisage de Bootstrap, comme le suivant:

<form class="form-horizontal">
  <fieldset>
    <legend>Legend text</legend>
    <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
        <p class="help-block">Supporting help text</p>
      </div>
    </div>
  </fieldset>
</form>

Il y a beaucoup de code standard là-dedans, que j'aimerais réduire à une nouvelle directive - form-input, comme suit:

<form-input label="Name" form-id="nameInput"></form-input>

génère:

   <div class="control-group">
      <label class="control-label" for="nameInput">Name</label>
      <div class="controls">
        <input type="text" class="input-xlarge" id="nameInput">
      </div>
    </div>

J'ai beaucoup de travail via un modèle simple.

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {
                label: 'bind',
                formId: 'bind'
            },
            template:   '<div class="control-group">' +
                            '<label class="control-label" for="{{formId}}">{{label}}</label>' +
                            '<div class="controls">' +
                                '<input type="text" class="input-xlarge" id="{{formId}}" name="{{formId}}">' +
                            '</div>' +
                        '</div>'

        }
    })

Cependant, c'est lorsque j'ajoute des fonctionnalités plus avancées que je suis bloqué.

Comment puis-je prendre en charge les valeurs par défaut dans le modèle?

Je voudrais exposer le paramètre "type" comme attribut facultatif sur ma directive, par exemple:

<form-input label="Password" form-id="password" type="password"/></form-input>
<form-input label="Email address" form-id="emailAddress" type="email" /></form-input>

Cependant, si rien n'est spécifié, j'aimerais utiliser par défaut "text". Comment puis-je soutenir cela?

Comment puis-je personnaliser le modèle en fonction de la présence / absence d'attributs?

J'aimerais également pouvoir prendre en charge l'attribut "requis", s'il est présent. Par exemple:

<form-input label="Email address" form-id="emailAddress" type="email" required/></form-input>

Si requiredest présent dans la directive, je voudrais l'ajouter au généré <input />dans la sortie et l'ignorer autrement. Je ne sais pas comment y parvenir.

Je soupçonne que ces exigences ont peut-être dépassé un simple modèle et doivent commencer à utiliser les phases de pré-compilation, mais je ne sais pas par où commencer.

angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs) {
            var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="control-group">' +
                '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="controls">' +
                    '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '</div>' +
                '</div>';
            element.replaceWith(htmlText);
        }
    };
})

J'ai essayé d'utiliser la solution proposée par Misko, mais dans ma situation, certains attributs, qui devaient être fusionnés dans mon template html, étaient eux-mêmes des directives.

Malheureusement, toutes les directives référencées par le modèle résultant ne fonctionnaient pas correctement. Je n'ai pas eu assez de temps pour plonger dans le code angulaire et découvrir la cause principale, mais j'ai trouvé une solution de contournement, qui pourrait potentiellement être utile.

La solution était de déplacer le code, qui crée le modèle html, de la compilation vers une fonction modèle. Exemple basé sur le code ci-dessus:

    angular.module('formComponents', [])
  .directive('formInput', function() {
    return {
        restrict: 'E',
        template: function(element, attrs) {
           var type = attrs.type || 'text';
            var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
            var htmlText = '<div class="control-group">' +
                '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                    '<div class="controls">' +
                    '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                    '</div>' +
                '</div>';
             return htmlText;
        }
        compile: function(element, attrs)
        {
           //do whatever else is necessary
        }
    }
})

Les réponses ci-dessus ne fonctionnent malheureusement pas tout à fait. En particulier, l'étape de compilation n'a pas accès à l'étendue, vous ne pouvez donc pas personnaliser le champ en fonction d'attributs dynamiques. L'utilisation de l'étape de liaison semble offrir le plus de flexibilité (en termes de création asynchrone de dom, etc.) L'approche ci-dessous aborde que:

<!-- Usage: -->
<form>
  <form-field ng-model="formModel[field.attr]" field="field" ng-repeat="field in fields">
</form>

// directive
angular.module('app')
.directive('formField', function($compile, $parse) {
  return { 
    restrict: 'E', 
    compile: function(element, attrs) {
      var fieldGetter = $parse(attrs.field);

      return function (scope, element, attrs) {
        var template, field, id;
        field = fieldGetter(scope);
        template = '..your dom structure here...'
        element.replaceWith($compile(template)(scope));
      }
    }
  }
})

J'ai créé un résumé avec un code plus complet et une description de l'approche.

Voici ce que j'ai fini par utiliser.

Je suis très nouveau sur AngularJS, j'aimerais donc voir de meilleures solutions / alternatives.

angular.module('formComponents', [])
    .directive('formInput', function() {
        return {
            restrict: 'E',
            scope: {},
            link: function(scope, element, attrs)
            {
                var type = attrs.type || 'text';
                var required = attrs.hasOwnProperty('required') ? "required='required'" : "";
                var htmlText = '<div class="control-group">' +
                    '<label class="control-label" for="' + attrs.formId + '">' + attrs.label + '</label>' +
                        '<div class="controls">' +
                        '<input type="' + type + '" class="input-xlarge" id="' + attrs.formId + '" name="' + attrs.formId + '" ' + required + '>' +
                        '</div>' +
                    '</div>';
                element.html(htmlText);
            }
        }
    })

Exemple d'utilisation:

<form-input label="Application Name" form-id="appName" required/></form-input>
<form-input type="email" label="Email address" form-id="emailAddress" required/></form-input>
<form-input type="password" label="Password" form-id="password" /></form-input>