Personalização do modelo dentro de uma diretiva
Eu tenho um formulário que está usando marcação de Bootstrap, como o seguinte:
<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>
Há um monte de código clichê lá, que eu gostaria de reduzir para uma nova diretiva - entrada de formulário, como segue:
<form-input label="Name" form-id="nameInput"></form-input>
gera:
<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>
Eu tenho muito trabalho através de um modelo simples.
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>'
}
})
No entanto, é quando eu adiciono funcionalidades mais avançadas que estou ficando presa.
Como posso suportar valores padrão no modelo?Gostaria de expor o parâmetro "type" como um atributo opcional na minha diretiva, por exemplo:
<form-input label="Password" form-id="password" type="password"/></form-input>
<form-input label="Email address" form-id="emailAddress" type="email" /></form-input>
No entanto, se nada for especificado, eu gostaria de padrão para"text"
. Como posso suportar isso?
Também gostaria de poder suportar o atributo "obrigatório", se estiver presente. Por exemplo:
<form-input label="Email address" form-id="emailAddress" type="email" required/></form-input>
E serequired
está presente na directiva, gostaria de adicioná-lo ao<input />
na saída e ignore-o de outra forma. Não tenho certeza de como conseguir isso.
Eu suspeito que esses requisitos podem ter ultrapassado um modelo simples e ter que começar a usar as fases de pré-compilação, mas não sei por onde começar.