Dostosowywanie szablonu w ramach dyrektywy

Mam formularz, który używa znaczników z Bootstrap, jak poniżej:

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

Jest tam wiele standardowych kodów, które chciałbym sprowadzić do nowej dyrektywy - form-input, jak następuje:

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

generuje:

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

Mam bardzo dużo pracy za pomocą prostego szablonu.

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

        }
    })

Jednak kiedy zaczynam dodawać bardziej zaawansowane funkcje, utknąłem.

Jak mogę obsługiwać wartości domyślne w szablonie?

Chciałbym ujawnić parametr „type” jako opcjonalny atrybut mojej dyrektywy, np .:

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

Jeśli jednak nic nie zostanie określone, chcę domyślnie"text". Jak mogę to wesprzeć?

Jak mogę dostosować szablon na podstawie obecności / braku atrybutów?

Chciałbym także móc obsługiwać atrybut „wymagany”, jeśli jest obecny. Na przykład:

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

Jeślirequired jest obecny w dyrektywie, chciałbym dodać go do wygenerowanego<input /> na wyjściu i zignoruj ​​to inaczej. Nie wiem, jak to osiągnąć.

Podejrzewam, że te wymagania mogły wykroczyć poza prosty szablon i muszą zacząć korzystać z faz wstępnej kompilacji, ale nie wiem, od czego zacząć.

questionAnswers(4)

yourAnswerToTheQuestion