new template slot

Author: Sandro Tajè

dist/angular-uikit.min.js

@@ -46,8 +46,12 @@ <h1 class="uk-article-title">Sortable</h1>
     <article class="uk-article">
         <h1 class="uk-article-title">JSON Table Form</h1>
         <form name="form" ng-submit="save(mt.machineType)">
-            <uk-ng-json-table-form model="vm.jsonTableModel" structure="vm.structure" can-reorder="true" submit-on-enter="true" read-only="false"></uk-ng-json-table-form>
-            {{form.$valid}}
+            <uk-ng-json-table-form model="vm.jsonTableModel" structure="vm.structure" can-reorder="true" submit-on-enter="true" read-only="false">
+                <custom-template>
+                    ciao
+                    {{m[s.property]}}
+                </custom-template>
+            </uk-ng-json-table-form>
         </form>
 
 
@@ -90,7 +94,8 @@ <h1 class="uk-article-title">JSON Table Form</h1>
                         id: 1,
                         label: "Units"
                     },
-                    priority: 1
+                    priority: 1,
+                    template: "TEMPLATEEE"
                 }, {
                     name: "ciao2",
                     keyValueObject: 1,
@@ -117,6 +122,11 @@ <h1 class="uk-article-title">JSON Table Form</h1>
                 }];
 
                 vm.structure = [
+                    {
+                        "type": "template",
+                        "label": "template",
+                        "property": "template"
+                    },
                     {
                         "label": "Image",
                         "property": "thumbnail",

dist/index.html

@@ -1,6 +1,6 @@
 {
   "name": "angular-uikit",
-  "version": "1.3.18",
+  "version": "1.4.0",
   "description": "Angular Uikit binding",
   "main": "./dist/angular-uikit.min.js",
   "scripts": {

package.json

@@ -139,6 +139,7 @@
                             </div>
                         </div>
 
+                        <div ng-switch-when="template" my-ng-init="transcludeTemplate"></div>
 
                         <!-- DEFAULT -->
 

src/angular-uikit-jsontableform.html

@@ -18,13 +18,23 @@ export default function ukNgJsonTableForm($compile, $timeout) {
             compact: "=?",
             oddIteration: "=?"
         },
+        transclude: {
+            template: "?customTemplate"
+        },
         templateUrl: function (elm, attrs) {
-            return !attrs.compact || attrs.compact==='false' ? templateUrl : compactTemplateUrl
+            return !attrs.compact || attrs.compact === 'false' ? templateUrl : compactTemplateUrl
         },
-        link: function (scope, element, attrs) {
+        link: function (scope, element, attrs, ctrl, $transcludeFn) {
+
+
+            scope.transcludeTemplate = function (element) {
+                $transcludeFn(element.scope(), function (clone) {
+                    element.append(clone);
+                }, null, 'template')
+            }
 
             if (scope.compact) {
-                if(scope.oddIteration==undefined)
+                if (scope.oddIteration == undefined)
                     scope.oddIteration = false;
                 scope.arraysStructure = [];
                 scope.valuesStructure = [];
@@ -54,7 +64,7 @@ export default function ukNgJsonTableForm($compile, $timeout) {
                     });
                 });
             };
-            
+
             scope.getHeaders = function (struct) {
                 var firstRow = [];
                 var secondRow = [];
@@ -68,7 +78,7 @@ export default function ukNgJsonTableForm($compile, $timeout) {
                     arr.forEach(function (s) {
                         if (s.type != 'array') {
                             if (first) {
-                                firstRow.push({colspan: 1});
+                                firstRow.push({ colspan: 1 });
                             }
                             secondRow.push(s);
                         } else {
@@ -85,7 +95,7 @@ export default function ukNgJsonTableForm($compile, $timeout) {
                     });
                 };
                 recur(struct);
-                return {firstRow: firstRow, secondRow: secondRow};
+                return { firstRow: firstRow, secondRow: secondRow };
             };
 
             scope.objectify = function (el) {

src/angular-uikit-jsontableform.js

@@ -8,31 +8,41 @@ import ukNgNotAllowArrayDuplicate from './angular-uikit-notallowarrayduplicate';
 import hxSubmitOnEnter from './angular-uikit-hx-submit-on-enter';
 
 angular.module('angularUikit', [])
-    .directive('ukNgAutocomplete', ukNgAutocomplete)
-    .directive('ukNgPagination', ukNgPagination)
-    .directive('ukNgJsonTableForm', ukNgJsonTableForm)
-    .directive('ukNgCalendar', ukNgCalendar)
-    .directive('ukNgSortableItem', ukNgSortableItem)
-    .directive('ukNgSortable', ukNgSortable)
-    .directive('ukNgNotAllowArrayDuplicate', ukNgNotAllowArrayDuplicate)
-    .directive('hxSubmitOnEnter', hxSubmitOnEnter)
-    .directive('isolateForm', function() {
-        return {
-          restrict: 'A',
-          require: '?form',
-          link: function(scope, element, attrs, formController) {
-            if (!formController) {
-              return;
-            }
-      
-            var parentForm = formController.$$parentForm; // Note this uses private API
-            if (!parentForm) {
-              return;
-            }
-      
-            // Remove this form from parent controller
-            parentForm.$removeControl(formController);
-          }
-        };
-      });
+  .directive('ukNgAutocomplete', ukNgAutocomplete)
+  .directive('ukNgPagination', ukNgPagination)
+  .directive('ukNgJsonTableForm', ukNgJsonTableForm)
+  .directive('ukNgCalendar', ukNgCalendar)
+  .directive('ukNgSortableItem', ukNgSortableItem)
+  .directive('ukNgSortable', ukNgSortable)
+  .directive('ukNgNotAllowArrayDuplicate', ukNgNotAllowArrayDuplicate)
+  .directive('hxSubmitOnEnter', hxSubmitOnEnter)
+  .directive('isolateForm', function () {
+    return {
+      restrict: 'A',
+      require: '?form',
+      link: function (scope, element, attrs, formController) {
+        if (!formController) {
+          return;
+        }
+
+        var parentForm = formController.$$parentForm; // Note this uses private API
+        if (!parentForm) {
+          return;
+        }
+
+        // Remove this form from parent controller
+        parentForm.$removeControl(formController);
+      }
+    };
+  })
+  .directive('myNgInit', function () {
+    return {
+      scope: {
+        myNgInit: '&'
+      },
+      link: function (scope, element, attributes) {
+        scope.myNgInit()(element);
+      }
+    };
+  });;
 ;