Browse Source

Move auto-completion machinery into a separate directive

Change-Id: Iba376d09ad00d2aa692e39084e6cfce987cf2541
changes/82/181082/3
Timur Sufiev 4 years ago
parent
commit
4669e42341

+ 16
- 0
merlin/static/merlin/js/merlin.directives.js View File

@@ -114,6 +114,18 @@
114 114
     })
115 115
     .directive('typedField', ['$compile', 'merlin.templates',
116 116
       function($compile, templates) {
117
+        function updateAutoCompletionDirective(template) {
118
+          template.find('input').each(function(index, elem) {
119
+            elem = angular.element(elem);
120
+            if ( elem.attr('autocompletable') ) {
121
+              // process 'autocompletable' attribute only once
122
+              elem.removeAttr('autocompletable');
123
+              elem.attr('typeahead-editable', true);
124
+              elem.attr('typeahead',
125
+                "option for option in value.getSuggestions() | filter:$viewValue");
126
+            }
127
+          });
128
+        }
117 129
         return {
118 130
           restrict: 'E',
119 131
           scope: {
@@ -122,6 +134,10 @@
122 134
           },
123 135
           link: function(scope, element) {
124 136
             templates.templateReady(scope.type).then(function(template) {
137
+              template = angular.element(template);
138
+              if ( scope.value.getSuggestions ) {
139
+                updateAutoCompletionDirective(template);
140
+              }
125 141
               element.replaceWith($compile(template)(scope));
126 142
             })
127 143
           }

+ 3
- 2
merlin/static/merlin/templates/fields/number.html View File

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

+ 3
- 8
merlin/static/merlin/templates/fields/string.html View File

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

+ 3
- 2
merlin/static/merlin/templates/fields/text.html View File

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

Loading…
Cancel
Save