Template field type

Make one shot add-ons with the template type.

Author: davidlgj

docs/index.md

@@ -24,6 +24,7 @@ Documentation
     1. [button](#button)
     1. [radios and radiobuttons](#radios-and-radiobuttons)
     1. [help](#help)
+    1. [template](#template)
     1. [tabs](#tabs)
     1. [array](#array)
     1. [tabarray](#tabarray)
@@ -351,6 +352,7 @@ Schema Form currently supports the following form field types out of the box:
 | radios-inline |  radio buttons in one line |
 | radiobuttons  |  radio buttons with bootstrap buttons |
 | help          |  insert arbitrary html |
+| template      |  insert an angular template |
 | tab           |  tabs with content     |
 | array         |  a list you can add, remove and reorder |
 | tabarray      |  a tabbed version of array |
@@ -905,6 +907,39 @@ function FormCtrl($scope) {
 }
 ```
 
+### template
+`template` fields are like `help` fields but instead of arbitrary html you can insert or refer to
+an angular template to be inserted where the field should go. There is one catch though and that
+is that the scope is that of the decorator directive and its inside the isolated scope of the
+`sf-schema` directive, so anything you like to access in the template should be put on the form,
+which is available in template. It's basically a simple one shot version of add-ons, so see the
+see the docs on [Extending Schema Form](extending.md) for details on what is on scope and what's up
+with `$$value$$`
+
+
+
+The `template` type should either have a `template` or a `templateUrl` option.
+
+Ex.
+```javascript
+function FormCtrl($scope) {
+
+  $scope.form = [
+    {
+      type: "template",
+      template: '<h1 ng-click="form.foo()">Yo {{form.name}}!</h1>',
+      name: 'Ninja',
+      foo: function() { console.log('oh noes!'); }
+    },
+    {
+      type: "template",
+      templateUrl: "templates/foo.html",
+      myFavouriteVariable: 'OMG!!'
+    }
+  ];
+}
+```
+
 ### tabs
 The `tabs` form type lets you split your form into tabs. It is similar to
 `fieldset` in that it just changes the presentation of the form. `tabs`

src/services/decorators.js

@@ -31,8 +31,8 @@ angular.module('schemaForm').provider('schemaFormDecorators',
 
   var createDirective = function(name) {
     $compileProvider.directive(name,
-      ['$parse', '$compile', '$http', '$templateCache', '$interpolate','sfErrorMessage',
-      function($parse,  $compile,  $http,  $templateCache, $interpolate, sfErrorMessage) {
+      ['$parse', '$compile', '$http', '$templateCache', '$interpolate', '$q', 'sfErrorMessage',
+      function($parse,  $compile,  $http,  $templateCache, $interpolate, $q, sfErrorMessage) {
 
         return {
           restrict: 'AE',
@@ -176,14 +176,28 @@ angular.module('schemaForm').provider('schemaFormDecorators',
                 //ok let's replace that template!
                 //We do this manually since we need to bind ng-model properly and also
                 //for fieldsets to recurse properly.
-                var url = templateUrl(name, form);
-                $http.get(url, {cache: $templateCache}).then(function(res) {
-                  var key = form.key ?
-                            sfPathProvider.stringify(form.key).replace(/"/g, '"') : '';
-                  var template = res.data.replace(
-                    /\$\$value\$\$/g,
-                    'model' + (key[0] !== '[' ? '.' : '') + key
-                  );
+                var templatePromise;
+
+                // type: "template" is a special case. It can contain a template inline or an url.
+                // otherwise we find out the url to the template and load them.
+                if (form.type === 'template' && form.template) {
+                  templatePromise = $q.when(form.template);
+                } else {
+                  var url = form.type === 'template' ? form.templateUrl : templateUrl(name, form);
+                  templatePromise = $http.get(url, {cache: $templateCache}).then(function(res) {
+                                      return res.data;
+                                    });
+                }
+
+                templatePromise.then(function(template) {
+                  if (form.key) {
+                    var key = form.key ?
+                              sfPathProvider.stringify(form.key).replace(/"/g, '"') : '';
+                    template = template.replace(
+                      /\$\$value\$\$/g,
+                      'model' + (key[0] !== '[' ? '.' : '') + key
+                    );
+                  }
                   element.html(template);
 
                   // Do we have a condition? Then we slap on an ng-if on all children,

test/directives/schema-form-test.js

@@ -1754,5 +1754,74 @@ describe('directive',function(){
     });
   });
 
+  it('should use supplied template with template field type',function() {
+
+    inject(function($compile, $rootScope){
+      var scope = $rootScope.$new();
+      scope.person = {};
+
+      scope.schema = {
+        type: 'object',
+        properties: {
+          name: {type: 'string'}
+        }
+      };
+
+      scope.form = [
+        {
+          type: 'template',
+          template: '<div>{{form.foo}}</div>',
+          foo: "Hello World"
+        }
+      ];
+
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+      $compile(tmpl)(scope);
+      $rootScope.$apply();
+
+      tmpl.children().eq(0).html().should.be.eq('<div class="ng-binding ng-scope">Hello World</div>')
+
+    });
+  });
+
+  it('should load template by templateUrl, with template field type',function() {
+
+    inject(function($compile, $rootScope, $httpBackend){
+
+      $httpBackend.when('GET', '/template.html')
+                  .respond("<div>{{form.foo}}</div>");
+
+      var scope = $rootScope.$new();
+      scope.person = {};
+
+      scope.schema = {
+        type: 'object',
+        properties: {
+          name: {type: 'string'}
+        }
+      };
+
+      scope.form = [
+        {
+          type: 'template',
+          templateUrl: '/template.html',
+          foo: 'Hello World'
+        }
+      ];
+
+      var tmpl = angular.element('<form sf-schema="schema" sf-form="form" sf-model="person"></form>');
+
+      $compile(tmpl)(scope);
+      $rootScope.$apply();
+      $httpBackend.flush();
+      $httpBackend.verifyNoOutstandingExpectation();
+      $httpBackend.verifyNoOutstandingRequest();
+
+      tmpl.children().eq(0).html().should.be.eq('<div class="ng-binding ng-scope">Hello World</div>')
+
+    });
+  });
+
 
 });