Move auto-completion machinery into a separate directive

Change-Id: Iba376d09ad00d2aa692e39084e6cfce987cf2541
This commit is contained in:
Timur Sufiev 2015-05-07 10:06:27 -07:00
parent d9f94958c2
commit 4669e42341
4 changed files with 25 additions and 12 deletions

View File

@ -114,6 +114,18 @@
})
.directive('typedField', ['$compile', 'merlin.templates',
function($compile, templates) {
function updateAutoCompletionDirective(template) {
template.find('input').each(function(index, elem) {
elem = angular.element(elem);
if ( elem.attr('autocompletable') ) {
// process 'autocompletable' attribute only once
elem.removeAttr('autocompletable');
elem.attr('typeahead-editable', true);
elem.attr('typeahead',
"option for option in value.getSuggestions() | filter:$viewValue");
}
});
}
return {
restrict: 'E',
scope: {
@ -122,6 +134,10 @@
},
link: function(scope, element) {
templates.templateReady(scope.type).then(function(template) {
template = angular.element(template);
if ( scope.value.getSuggestions ) {
updateAutoCompletionDirective(template);
}
element.replaceWith($compile(template)(scope));
})
}

View File

@ -1,6 +1,7 @@
<div class="form-group">
<pre>{$ value $}, {$ value.title() $}</pre>
<label for="elem-{$ $id $}">{$ value.title() $}</label>
<input type="number" class="form-control" id="elem-{$ $id $}" ng-model="value.value"
ng-model-options="{ getterSetter: true }">
<input type="number" class="form-control" id="elem-{$ $id $}"
ng-model="value.value" ng-model-options="{ getterSetter: true }"
autocompletable="true">
</div>

View File

@ -1,11 +1,6 @@
<div class="form-group">
<label for="elem-{$ $id $}">{$ value.title() $}</label>
<input ng-if="!value.getSuggestions"
type="text" class="form-control" id="elem-{$ $id $}" ng-model="value.value"
ng-model-options="{ getterSetter: true }">
<input ng-if="value.getSuggestions"
type="text" class="form-control" id="elem-{$ $id $}" ng-model="value.value"
ng-model-options="{ getterSetter: true }"
typeahead="option for option in value.getSuggestions() | filter:$viewValue"
typeahead-editable="true">
<input type="text" class="form-control" id="elem-{$ $id $}"
ng-model="value.value" ng-model-options="{ getterSetter: true }"
autocompletable="true">
</div>

View File

@ -1,5 +1,6 @@
<div class="form-group">
<label for="elem-{$ $id $}">{$ value.title() $}</label>
<textarea class="form-control" id="elem-{$ $id $}" ng-model="value.value"
ng-model-options="{ getterSetter: true }"></textarea>
<textarea class="form-control" id="elem-{$ $id $}"
ng-model="value.value" ng-model-options="{ getterSetter: true }"
autocompletable="true"></textarea>
</div>