Menyesuaikan template dalam Directive

Saya memiliki formulir yang menggunakan markup dari Bootstrap, seperti berikut:

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

Ada banyak kode boilerplate di sana, yang ingin saya kurangi menjadi direktif baru - form-input, seperti berikut:

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

menghasilkan:

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

Saya memiliki banyak pekerjaan melalui template sederhana.

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

        }
    })

Namun, ketika saya menambahkan fungsionalitas yang lebih canggih, saya terjebak.

Bagaimana saya bisa mendukung nilai default di template?

Saya ingin mengekspos parameter "type" sebagai atribut opsional pada direktif saya, misalnya:

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

Namun, jika tidak ada yang ditentukan, saya ingin menggunakan default "text". Bagaimana saya bisa mendukung ini?

Bagaimana cara menyesuaikan template berdasarkan ada / tidak adanya atribut?

Saya juga ingin dapat mendukung atribut "diperlukan", jika ada. Misalnya:

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

Jika requiredada dalam direktif, saya ingin menambahkannya ke yang dihasilkan <input />dalam output, dan mengabaikannya sebaliknya. Saya tidak yakin bagaimana mencapai ini.

Saya menduga persyaratan ini mungkin telah melampaui template sederhana, dan harus mulai menggunakan fase pra-kompilasi, tetapi saya bingung harus mulai dari mana.

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

Mencoba menggunakan solusi yang diusulkan oleh Misko, tetapi dalam situasi saya, beberapa atribut, yang perlu digabungkan ke dalam html template saya, adalah direktif itu sendiri.

Sayangnya, tidak semua arahan yang dirujuk oleh templat yang dihasilkan berfungsi dengan benar. Saya tidak punya cukup waktu untuk menyelami kode sudut dan mencari tahu akar penyebabnya, tetapi menemukan solusi, yang berpotensi dapat membantu.

Solusinya adalah memindahkan kode, yang membuat html template, dari kompilasi ke fungsi template. Contoh berdasarkan kode dari atas:

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

Jawaban di atas sayangnya tidak cukup berhasil. Secara khusus, tahap kompilasi tidak memiliki akses ke cakupan, jadi Anda tidak dapat menyesuaikan kolom berdasarkan atribut dinamis. Menggunakan tahap penautan tampaknya menawarkan fleksibilitas paling besar (dalam hal membuat dom secara asinkron, dll.) Pendekatan di bawah ini membahas bahwa:

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

Saya telah membuat intisari dengan kode yang lebih lengkap dan penulisan pendekatannya.

Inilah yang akhirnya saya gunakan.

Saya sangat baru di AngularJS, jadi ingin melihat solusi yang lebih baik / alternatif.

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

Contoh penggunaan:

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