Merge branch 'ebrehault-pre-existing-html-layout' into development

Author: davidlgj

dist/schema-form.js

@@ -1276,17 +1276,28 @@ angular.module('schemaForm')
             //make the form available to decorators
             scope.schemaForm  = {form:  merged, schema: schema};
 
-            //Create directives from the form definition
-            angular.forEach(merged, function(obj, i) {
-              var n = document.createElement(attrs.sfDecoratorName ||
-                      snakeCase(schemaFormDecorators.defaultDecorator, '-'));
-              n.setAttribute('form', 'schemaForm.form[' + i + ']');
-              frag.appendChild(n);
-            });
-
             //clean all but pre existing html.
             element.children(':not(.schema-form-ignore)').remove();
 
+            //Create directives from the form definition
+            angular.forEach(merged,function(obj,i){
+              var n = document.createElement(attrs.sfDecorator || snakeCase(schemaFormDecorators.defaultDecorator,'-'));
+              n.setAttribute('form','schemaForm.form['+i+']');
+              var slot;
+              try {
+                slot = element[0].querySelector('*[sf-insert-field="' + obj.key + '"]');
+              } catch(err) {
+                // field insertion not supported for complex keys
+                slot = null;
+              }
+              if(slot) {
+                slot.innerHTML = "";
+                slot.appendChild(n);  
+              } else {
+                frag.appendChild(n);
+              }
+            });
+
             element[0].appendChild(frag);
 
             //compile only children

dist/schema-form.min.js

@@ -37,7 +37,13 @@ <h1>Schema Form Example</h1>
   <div class="row">
     <div class="col-sm-4">
       <h3>The Generated Form</h3>
-      <form name="ngform"  sf-model="modelData" sf-form="form" sf-schema="schema" ng-submit="submitForm(ngform,modelData)"></form>
+      <form name="ngform"
+            sf-model="modelData"
+            sf-form="form"
+            sf-schema="schema"
+            ng-submit="submitForm(ngform,modelData)">
+              <em>before</em><div sf-insert-field="name"></div><em>after</em>
+      </form>
       <h3>Model</h3>
       <pre ng-cloak>{{pretty()}}</pre>
     </div>

examples/bootstrap-example.html

@@ -80,17 +80,28 @@ angular.module('schemaForm')
             //make the form available to decorators
             scope.schemaForm  = {form:  merged, schema: schema};
 
-            //Create directives from the form definition
-            angular.forEach(merged, function(obj, i) {
-              var n = document.createElement(attrs.sfDecoratorName ||
-                      snakeCase(schemaFormDecorators.defaultDecorator, '-'));
-              n.setAttribute('form', 'schemaForm.form[' + i + ']');
-              frag.appendChild(n);
-            });
-
             //clean all but pre existing html.
             element.children(':not(.schema-form-ignore)').remove();
 
+            //Create directives from the form definition
+            angular.forEach(merged,function(obj,i){
+              var n = document.createElement(attrs.sfDecorator || snakeCase(schemaFormDecorators.defaultDecorator,'-'));
+              n.setAttribute('form','schemaForm.form['+i+']');
+              var slot;
+              try {
+                slot = element[0].querySelector('*[sf-insert-field="' + obj.key + '"]');
+              } catch(err) {
+                // field insertion not supported for complex keys
+                slot = null;
+              }
+              if(slot) {
+                slot.innerHTML = "";
+                slot.appendChild(n);  
+              } else {
+                frag.appendChild(n);
+              }
+            });
+
             element[0].appendChild(frag);
 
             //compile only children

src/directives/schema-form.js

@@ -173,6 +173,27 @@ describe('directive',function(){
     });
   });
 
+  it('should preserve existing html and insert fields in matching slots',function(){
+
+    inject(function($compile,$rootScope){
+      var scope = $rootScope.$new();
+      scope.person = {};
+
+      scope.schema = exampleSchema;
+
+      scope.form = ["*"];
+
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"><ul><li sf-insert-field="name"></li></ul></form>');
+
+      $compile(tmpl)(scope);
+      $rootScope.$apply();
+
+      tmpl.children().eq(0).is('ul').should.be.true;
+      tmpl.children().eq(0).find('input').attr('ng-model').should.be.equal('model[\'name\']');
+    });
+  });
+  
+
   it('should handle submit buttons',function(){
 
     inject(function($compile,$rootScope){
@@ -1599,4 +1620,4 @@ describe('directive',function(){
     });
   });
 
-});
+});