x
/
merlin
Code Issues Proposed changes

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
merlin/static/merlin/js/merlin.directives.js
View File

@ -114,6 +114,18 @@
}) })
.directive('typedField', ['$compile', 'merlin.templates', .directive('typedField', ['$compile', 'merlin.templates',
function($compile, 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 { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
@ -122,6 +134,10 @@
}, },
link: function(scope, element) { link: function(scope, element) {
templates.templateReady(scope.type).then(function(template) { templates.templateReady(scope.type).then(function(template) {
template = angular.element(template);
if ( scope.value.getSuggestions ) {
updateAutoCompletionDirective(template);
}
element.replaceWith($compile(template)(scope)); element.replaceWith($compile(template)(scope));
}) })
} }

5
merlin/static/merlin/templates/fields/number.html
View File

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

11
merlin/static/merlin/templates/fields/string.html
View File

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

5
merlin/static/merlin/templates/fields/text.html
View File

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