Şablonu bir Direktif içinde özelleştirme

Aşağıdaki gibi Bootstrap'ten işaretlemeyi kullanan bir formum var:

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

Burada, aşağıdaki gibi yeni bir yönergeye (form-input) indirgemek istediğim çok sayıda standart kod var:

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

üretir:

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

Basit bir şablonla bu kadar çalışıyorum.

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, daha gelişmiş işlevler eklemeye başladığımda sıkışıp kalıyorum.

Şablondaki varsayılan değerleri nasıl destekleyebilirim?

Yönergemde "tür" parametresini isteğe bağlı bir öznitelik olarak göstermek istiyorum, örneğin:

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

Ancak, hiçbir şey belirtilmezse, varsayılan olarak ayarlamak isterim "text". Bunu nasıl destekleyebilirim?

Özniteliklerin varlığına / yokluğuna göre şablonu nasıl özelleştirebilirim?

Ayrıca varsa "gerekli" özniteliği de destekleyebilmeyi isterim. Örneğin:

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

Eğer requiredyönergede mevcuttur, ben oluşturulan eklemek istediğiniz <input />çıktı ve başka türlü bunu görmezden. Bunu nasıl başaracağımdan emin değilim.

Bu gereksinimlerin basit bir şablonun ötesine geçmiş olabileceğinden ve ön derleme aşamalarını kullanmaya başlamam gerektiğinden şüpheleniyorum, ancak nereden başlayacağımı 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);
        }
    };
})

Misko tarafından önerilen çözümü kullanmaya çalıştım, ancak benim durumumda html şablonumla birleştirilmesi gereken bazı özniteliklerin kendileri de yönergelerdi.

Ne yazık ki, sonuçta ortaya çıkan şablon tarafından atıfta bulunulan tüm yönergeler doğru çalışmadı. Açısal koda dalmak ve temel nedeni bulmak için yeterli zamanım olmadı, ancak potansiyel olarak yardımcı olabilecek bir çözüm buldum.

Çözüm, şablon html'yi oluşturan kodu derlemeden şablon işlevine taşımaktı. Yukarıdaki koda dayalı örnek:

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

Yukarıdaki cevaplar maalesef pek işe yaramıyor. Özellikle, derleme aşamasının kapsama erişimi yoktur, bu nedenle alanı dinamik özniteliklere göre özelleştiremezsiniz. Bağlama aşamasını kullanmak (eşzamansız olarak dom oluşturma vb. Açısından) en fazla esnekliği sunuyor gibi görünüyor. Aşağıdaki yaklaşım şunları ele alır:

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

Oluşturduğum bir özü daha tam kod ve bir ile writeup yaklaşımının.

İşte kullanmaya son verdiğim şey.

AngularJS'de çok yeniyim, bu yüzden daha iyi / alternatif çözümler görmeyi çok isterim.

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

Örnek kullanım:

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