Bootstrap işaretleme kullanan bir form, aşağıdaki gibi:

<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>

Aşağıdaki gibi yeni bir Direktif formu-giriş, azaltmak istiyorum oradaki demirbaş kodu bir sürü var

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

oluşturur:

   <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>

Bu çok basit bir şablon üzerinden çalışıyor.

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>'

        }
    })

Ancak sıkışmış alıyorum daha gelişmiş işlevsellik eklemek için geldim.

Nasıl şablon varsayılan değerler destek alabilir miyim?

""Parametresi isteğe bağlı bir özellik olarak görevim, örn: . türü duyurmak istiyorum

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

Eğer başka bir şey belirtilmemişse, ancak "text" varsayılan etmek istiyorum. Bu nasıl destek olabilirim?

Nasıl şablon öznitelikleri varlığı / yokluğu dayalı özelleştirmek olabilir miyim?

Ayrıca "" eğer varsa.öznitelik, gerekli destek olmak isterim Örneğin:

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

Eğer required Direktif varsa, bu çıkışı <input /> oluşturulan, ve aksi takdirde görmezden eklemek istiyorum. Bunu başarmak için nasıl emin değilim.

Bu gereksinimler basit bir şablon ötesine taşındı ve pre-derleme aşamaları kullanarak başlamak zorunda olabilir şüpheleniyorum, ama nereden başlayacağımı ne diyeceğimi bilmiyorum.

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);
        }
    }
})