fix(uiGridRow): Use promise to get compiled elm fn

We need to use a promise to get the compiled element function for
attaching row elements. If the template fetch is deferred then the
compiled template function will be deferred as well.

Author: c0bra

src/js/core/directives/ui-grid-cell.js

@@ -77,6 +77,7 @@ angular.module('ui.grid').directive('uiGridCell', ['$compile', '$parse', 'gridUt
             }
           };
 
+          // TODO(c0bra): Turn this into a deep array watch
           var colWatchDereg = $scope.$watch( 'col', cellChangeFunction );
           var rowWatchDereg = $scope.$watch( 'row', cellChangeFunction );
 

src/js/core/directives/ui-grid-row.js

@@ -26,32 +26,34 @@
             // Function for attaching the template to this scope
             var clonedElement, cloneScope;
             function compileTemplate() {
-              var compiledElementFn = $scope.row.compiledElementFn;
+              $scope.row.getRowTemplateFn.then(function (compiledElementFn) {
+                // var compiledElementFn = $scope.row.compiledElementFn;
 
-              // Create a new scope for the contents of this row, so we can destroy it later if need be
-              var newScope = $scope.$new();
+                // Create a new scope for the contents of this row, so we can destroy it later if need be
+                var newScope = $scope.$new();
 
-              compiledElementFn(newScope, function (newElm, scope) {
-                // If we already have a cloned element, we need to remove it and destroy its scope
-                if (clonedElement) {
-                  clonedElement.remove();
-                  cloneScope.$destroy();
-                }
+                compiledElementFn(newScope, function (newElm, scope) {
+                  // If we already have a cloned element, we need to remove it and destroy its scope
+                  if (clonedElement) {
+                    clonedElement.remove();
+                    cloneScope.$destroy();
+                  }
 
-                // Empty the row and append the new element
-                $elm.empty().append(newElm);
+                  // Empty the row and append the new element
+                  $elm.empty().append(newElm);
 
-                // Save the new cloned element and scope
-                clonedElement = newElm;
-                cloneScope = newScope;
+                  // Save the new cloned element and scope
+                  clonedElement = newElm;
+                  cloneScope = newScope;
+                });
               });
             }
 
             // Initially attach the compiled template to this scope
             compileTemplate();
 
             // If the row's compiled element function changes, we need to replace this element's contents with the new compiled template
-            $scope.$watch('row.compiledElementFn', function (newFunc, oldFunc) {
+            $scope.$watch('row.getRowTemplateFn', function (newFunc, oldFunc) {
               if (newFunc !== oldFunc) {
                 compileTemplate();
               }

src/js/core/services/gridClassFactory.js

@@ -194,12 +194,6 @@
 
             // Use the grid's function for fetching the compiled row template function
             row.getRowTemplateFn = grid.getRowTemplateFn;
-
-            // Get the compiled row template function...
-            grid.getRowTemplateFn.then(function (rowTemplateFn) {
-              // And assign it to the row
-              row.compiledElementFn = rowTemplateFn;
-            });
           }
           // Row has its own template assigned
           else {
@@ -212,10 +206,7 @@
               .then(function (template) {
                 // Compile the template
                 var rowTemplateFn = $compile(template);
-
-                // Assign the compiled template function to this row
-                row.compiledElementFn = rowTemplateFn;
-
+                
                 // Resolve the compiled template function promise
                 perRowTemplateFnPromise.resolve(rowTemplateFn);
               },
@@ -224,6 +215,8 @@
                 throw new Error("Couldn't fetch/use row template '" + row.rowTemplate + "'");
               });
           }
+
+          return row.getRowTemplateFn;
         }
       };
 

test/unit/core/directives/ui-grid-row.spec.js

@@ -1,4 +1,4 @@
-ddescribe('uiGridRow', function () {
+describe('uiGridRow', function () {
   var grid, data, columnDefs, $scope, $compile, $document, recompile, uiGridConstants, GridRow, gridUtil;
 
   data = [
@@ -43,7 +43,7 @@ ddescribe('uiGridRow', function () {
   }));
 
   describe('with different row templates', function () {
-    beforeEach(inject(function($templateCache) {
+    beforeEach(inject(function($templateCache, $q) {
       $templateCache.put('customRowTemplate', '<div><div>The name is: {{ row.entity.name }}</div></div>');
 
       $scope.gridApi.grid.registerRowsProcessor(function alterTemplates(rows, cols) {
@@ -54,7 +54,7 @@ ddescribe('uiGridRow', function () {
             row.rowTemplate = 'customRowTemplate';
             gridUtil.getTemplate(row.rowTemplate)
               .then(function (template) {
-                row.compiledElementFn = $compile(template);
+                row.getRowTemplateFn = $q.when($compile(template));
               });
           }
         });