У меня есть форма, в которой используется разметка из 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>'
}
})
Однако когда я прихожу, чтобы добавить более продвинутые функции, я застреваю.
Как я могу поддерживать значения по умолчанию в шаблоне?
Я хотел бы указать параметр "тип" как необязательный атрибут в моей директиве, например:
<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 />
на выходе и игнорировать его в противном случае. Я не знаю, как этого добиться.
Я подозреваю, что эти требования, возможно, вышли за рамки простого шаблона и должны начать использовать этапы предварительной компиляции, но я не понимаю, с чего начать.
type
устанавливается динамически через привязку, например.type="{{ $ctrl.myForm.myField.type}}"
? Я проверил все приведенные ниже методы и не нашел решения, которое будет работать в этом сценарии. Похоже, функция шаблона будет видеть буквальные значения атрибутов, например.tAttr['type'] == '{{ $ctrl.myForm.myField.type }}'
вместоtAttr['type'] == 'password'
. Я озадачен.