Merge branch 'kentcdodds-add-template'

Author: ghelton

CHANGELOG.md

@@ -6,6 +6,8 @@ Version numbers correspond to `bower.json` version
 
 Added `hide` property on fields. Allows devs to conditionally show fields. Also adding `hideExpression` property which is an expression that will be evaluated on the result object (using $parse) to make the api simpler to use.
 
+Added `template` property on fields. Allows devs to have one-liner templates. Mainly used for directives so a single template can be used with options. Also improved the id of fields that use templateUrls or templates.
+
 ## Bug Fixes
 
 ## Breaking Changes

README.md

@@ -93,10 +93,10 @@ Forms can be customized with the options below.
 >`submitCopy` customizes the submit button copy. Defaults to 'Submit'.
 
 ### Creating Form Fields
-When constructing fields use the options below to customize each field object. You must set at least a `type` or `templateUrl`.
+When constructing fields use the options below to customize each field object. You must set at least a `type`, `template`, or `templateUrl`.
 
 ##### type (string)
->`type` is the type of field to be rendered. Either type or templateUrl must be set.
+>`type` is the type of field to be rendered. Either type, template, or templateUrl must be set.
 
 ###### Default
 >`null`
@@ -112,9 +112,16 @@ When constructing fields use the options below to customize each field object. Y
 > [`hidden`](#hidden-form-field),
 > [`email`](#email-form-field)
 
+---
+##### template (string)
+>`template` can be set instead of `type` or `templateUrl` to use a custom html template form field. Should be used with one-liners mostly (like a directive). Useful for adding functionality to fields.
+
+###### Default
+>`undefined`
+
 ---
 ##### templateUrl (string)
->`templateUrl` can be set instead of `type` to use a custom html template form field. Set a path relative to the root of the application. ie `directives/custom-field.html`
+>`templateUrl` can be set instead of `type` or `template` to use a custom html template form field. Set a path relative to the root of the application. ie `directives/custom-field.html`
 
 ###### Default
 >`undefined`

dist/formly.js

@@ -54,15 +54,24 @@ angular.module('formly.render').directive('formlyField', [
         value: '=formValue'
       },
       link: function fieldLink($scope, $element, $attr) {
-        var templateUrl = $scope.options.templateUrl || getTemplateUrl($scope.options.type);
-        if (templateUrl) {
-          $http.get(templateUrl, { cache: $templateCache }).success(function (data) {
-            //template data returned
-            $element.html(data);
-            $compile($element.contents())($scope);
-          });
+        var template = $scope.options.template;
+        if (template) {
+          setElementTemplate(template);
         } else {
-          console.log('Formly Error: template type \'' + $scope.options.type + '\' not supported.');
+          var templateUrl = $scope.options.templateUrl || getTemplateUrl($scope.options.type);
+          if (templateUrl) {
+            $http.get(templateUrl, { cache: $templateCache }).then(function (response) {
+              setElementTemplate(response.data);
+            }, function (error) {
+              console.log('Formly Error: Problem loading template for ' + templateUrl, error);
+            });
+          } else {
+            console.log('Formly Error: template type \'' + $scope.options.type + '\' not supported.');
+          }
+        }
+        function setElementTemplate(templateData) {
+          $element.html(templateData);
+          $compile($element.contents())($scope);
         }
       },
       controller: [
@@ -72,8 +81,14 @@ angular.module('formly.render').directive('formlyField', [
           if (typeof $scope.options.default !== 'undefined') {
             $scope.value = $scope.options.default;
           }
+          var type = $scope.options.type;
+          if (!type && $scope.options.template) {
+            type = 'template';
+          } else if (!type && $scope.options.templateUrl) {
+            type = 'templateUrl';
+          }
           // set field id to link labels and fields
-          $scope.id = $scope.formId + $scope.options.type + $scope.index;
+          $scope.id = $scope.formId + type + $scope.index;
         }
       ]
     };