Mam formularz, który używa znaczników z Bootstrap, na przykład:
<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 dużo gotowego kodu, który chciałbym zredukować do nowej dyrektywy - form-input, na przykład:
<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>
Tyle pracuję dzięki prostemu szablonowi.
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 dodam bardziej zaawansowaną funkcjonalność, utknęłam.
Jak mogę obsługiwać wartości domyślne w szablonie?
Chciałbym ujawnić parametr „type” jako opcjonalny atrybut w mojej dyrektywie, 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 również 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śli required
jest obecny w dyrektywie, chciałbym dodać go do wygenerowanego <input />
wyniku i zignorować w przeciwnym razie. Nie jestem pewien, jak to osiągnąć.
Podejrzewam, że te wymagania mogły wyjść poza prosty szablon i muszę zacząć korzystać z faz prekompilacji, ale nie wiem, od czego zacząć.
type
jest ustawiane dynamicznie poprzez wiązanie np.type="{{ $ctrl.myForm.myField.type}}"
? Sprawdziłem wszystkie poniższe metody i nie mogłem znaleźć żadnego rozwiązania, które zadziała w tym scenariuszu. Wygląda na to, że funkcja szablonu zobaczy dosłowne wartości atrybutów, np.tAttr['type'] == '{{ $ctrl.myForm.myField.type }}'
zamiasttAttr['type'] == 'password'
. Jestem zdziwiony.