[解決済み] ディレクティブ内のテンプレートをカスタマイズする

質問

以下のようなBootstrapのマークアップを使用したフォームがあります。

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

この中には多くの定型的なコードがありますが、次のように新しいディレクティブ - form-input - にまとめたいと思います。

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

が生成します。

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

簡単なテンプレートでこれだけ動作しています。

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

        }
    })

しかし、より高度な機能を追加しようとすると、行き詰ってしまいます。

テンプレートでデフォルト値をサポートするにはどうすればよいですか。

ディレクティブのオプション属性として、quot;type" パラメータを公開したいのですが、例えば、以下のようになります。

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

しかし、何も指定されない場合は、デフォルトで "text" . どうすれば対応できますか？

属性の有無に基づいてテンプレートをカスタマイズするには？

また、"required"属性がある場合、それをサポートできるようにしたいのですが。 例えば

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

もし required がディレクティブに存在する場合、それを生成された <input /> を出力に加え、それ以外は無視したいのです。 これを達成する方法がよくわかりません。

これらの要件は単純なテンプレートを超えて、プリコンパイルフェーズを使用し始めなければならないかもしれないと思いますが、どこから始めればよいか途方に暮れています。

どのように解決するのですか?

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