Merge branch 'pre-existing-html-layout' of https://github.com/ebrehault/angular-schema-form into ebrehault-pre-existing-html-layout

Conflicts:
	dist/schema-form.min.js
	test/schema-form-test.js

Author: davidlgj

dist/schema-form.js

@@ -1276,17 +1276,26 @@ 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) {
+                slot = null;
+              }
+              if(slot) {
+                slot.appendChild(n);  
+              } else {
+                frag.appendChild(n);
+              }
+            });
+
             element[0].appendChild(frag);
 
             //compile only children

src/directives/schema-form.js

@@ -80,17 +80,27 @@ 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.appendChild(n);  
+              } else {
+                frag.appendChild(n);
+              }
+            });
+
             element[0].appendChild(frag);
 
             //compile only children

test/directives/schema-form-test.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(){
     });
   });
 
-});
+});