feat(cellTemplates): add MODEL_COL_FIELD to cellTemplate parsing so it can be used in ng-model #1633

Breaking Change: All editable cell templates must be changed to use MODEL_COL_FIELD

Author: swalters

CHANGELOG.md

@@ -1,3 +1,12 @@
+<a name="v3.0.0-rc.NEXT"></a>
+### v3.0.0-rc.NEXT Current Master
+
+#### Breaking Changes
+* editableCellTemplates should use MODEL_COL_FIELD instead of COL_FIELD.
+https://github.com/angular-ui/ng-grid/issues/1633 MODEL_COL_FIELD variable was added to the cellTemplate and editCellTemplate for utilizing the bound field in ng-model.  Edit feature
+was changed to use MODEL_COL_FIELD instead of COL_FIELD for consistency.
+
+
 <a name="v3.0.0-rc.11"></a>
 ### v3.0.0-rc.11 (2014-09-26)
 

misc/tutorial/106_binding.ngdoc

@@ -8,6 +8,14 @@ This tutorial shows two-way binding to properties with special characters, array
 
 Note that a function can not be edited.
 
+In your custom cellTemplates, you can use:
+<br/>
+COL\_FIELD which will be replaced with grid.getCellValue(row). This should be used for any cellTemplates that need readonly access to the field value
+<br/>
+MODEL\_COL\_FIELD which will be replaced with row.entity.field.  Use MODEL\_COL\_FIELD anytime you need ng-model='field'
+
+
+
 @example
 <example module="app">
   <file name="app.js">

src/features/edit/js/gridEdit.js

@@ -497,7 +497,7 @@
               origCellValue = cellModel($scope);
 
               html = $scope.col.editableCellTemplate;
-              html = html.replace(uiGridConstants.COL_FIELD, $scope.row.getQualifiedColField($scope.col));
+              html = html.replace(uiGridConstants.MODEL_COL_FIELD, $scope.row.getQualifiedColField($scope.col));
 
               var optionFilter = $scope.col.colDef.editDropdownFilter ? '|' + $scope.col.colDef.editDropdownFilter : ''; 
               html = html.replace(uiGridConstants.CUSTOM_FILTERS, optionFilter);

src/features/edit/templates/cellEditor.html

@@ -1,5 +1,5 @@
 <div>
     <form name="inputForm">
-        <input type="{{inputType}}" ng-class="'colt' + col.index" ui-grid-editor ng-model="COL_FIELD" />
+        <input type="{{inputType}}" ng-class="'colt' + col.index" ui-grid-editor ng-model="MODEL_COL_FIELD" />
     </form>
 </div>

src/features/edit/templates/dropdownEditor.html

@@ -1,5 +1,5 @@
 <div>
   <form name="inputForm">
-    <select ng-class="'colt' + col.index" ui-grid-edit-dropdown ng-model="COL_FIELD" ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray"></select>
+    <select ng-class="'colt' + col.index" ui-grid-edit-dropdown ng-model="MODEL_COL_FIELD" ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] CUSTOM_FILTERS for field in editDropdownOptionsArray"></select>
   </form>
 </div>

src/features/edit/test/uiGridCell.spec.js

@@ -15,7 +15,7 @@ describe('ui.grid.edit GridCellDirective', function () {
     $timeout = _$timeout_;
 
     $templateCache.put('ui-grid/uiGridCell', '<div class="ui-grid-cell-contents">{{COL_FIELD CUSTOM_FILTERS}}</div>');
-    $templateCache.put('ui-grid/cellEditor', '<div><input ng-model="COL_FIELD" ui-grid-editor /></div>');
+    $templateCache.put('ui-grid/cellEditor', '<div><input ng-model="MODEL_COL_FIELD" ui-grid-editor /></div>');
 
     scope = $rootScope.$new();
     var grid = gridClassFactory.createGrid();

src/features/edit/test/uiGridCellWithDropdown.spec.js

@@ -15,7 +15,7 @@ describe('ui.grid.edit GridCellDirective - with dropdown', function () {
     $timeout = _$timeout_;
 
     $templateCache.put('ui-grid/uiGridCell', '<div class="ui-grid-cell-contents">{{COL_FIELD CUSTOM_FILTERS}}</div>');
-    $templateCache.put('ui-grid/cellEditor', '<div><select ng-model="COL_FIELD" ui-grid-edit-dropdown ng-model="COL_FIELD" ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] for field in editDropdownOptionsArray"></select></div>');
+    $templateCache.put('ui-grid/cellEditor', '<div><select ng-model="MODEL_COL_FIELD" ui-grid-edit-dropdown ng-options="field[editDropdownIdLabel] as field[editDropdownValueLabel] for field in editDropdownOptionsArray"></select></div>');
 
     scope = $rootScope.$new();
     var grid = gridClassFactory.createGrid();

src/js/core/constants.js

@@ -3,6 +3,7 @@
   angular.module('ui.grid').constant('uiGridConstants', {
     CUSTOM_FILTERS: /CUSTOM_FILTERS/g,
     COL_FIELD: /COL_FIELD/g,
+    MODEL_COL_FIELD: /MODEL_COL_FIELD/g,
     DISPLAY_CELL_TEMPLATE: /DISPLAY_CELL_TEMPLATE/g,
     TEMPLATE_REGEXP: /<.+>/,
     FUNC_REGEXP: /(\([^)]*\))?$/,

src/js/core/factories/Grid.js

@@ -386,12 +386,26 @@ angular.module('ui.grid')
  * @description precompiles all cell templates
  */
   Grid.prototype.preCompileCellTemplates = function() {
-        this.columns.forEach(function (col) {
-          var html = col.cellTemplate.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)');
+    var self = this;
+    this.columns.forEach(function (col) {
+      var html = col.cellTemplate.replace(uiGridConstants.MODEL_COL_FIELD, self.getQualifiedColField(col));
+      html = html.replace(uiGridConstants.COL_FIELD, 'grid.getCellValue(row, col)');
 
-          var compiledElementFn = $compile(html);
-          col.compiledElementFn = compiledElementFn;
-        });
+
+      var compiledElementFn = $compile(html);
+      col.compiledElementFn = compiledElementFn;
+    });
+  };
+
+  /**
+   * @ngdoc function
+   * @name getGridQualifiedColField
+   * @methodOf ui.grid.class:Grid
+   * @description precompiles all cell templates
+   * @param {GridColumn} col col object
+   */
+  Grid.prototype.getQualifiedColField = function (col) {
+    return 'row.entity.' + gridUtil.preEval(col.field);
   };
 
   /**

test/unit/core/factories/Grid.spec.js

@@ -1,15 +1,17 @@
 describe('Grid factory', function () {
   var $q, $scope, grid, Grid, GridRow, GridColumn, rows, returnedRows, column, uiGridConstants;
+  var gridClassFactory;
 
   beforeEach(module('ui.grid'));
 
-  beforeEach(inject(function (_$q_, _$rootScope_, _Grid_, _GridRow_, _GridColumn_, _uiGridConstants_) {
+  beforeEach(inject(function (_$q_, _$rootScope_, _Grid_, _GridRow_, _GridColumn_, _uiGridConstants_, _gridClassFactory_) {
     $q = _$q_;
     $scope = _$rootScope_;
     Grid = _Grid_;
     GridRow = _GridRow_;
     GridColumn = _GridColumn_;
     uiGridConstants = _uiGridConstants_;
+    gridClassFactory = _gridClassFactory_;
 
     grid = new Grid({ id: 1 });
     rows = [
@@ -262,6 +264,27 @@ describe('Grid factory', function () {
 
     });
 
+    it('should replace constants in template', inject(function ($timeout) {
+
+      var colDefs = [
+        {name:'simpleProp', cellTemplate:'<div ng-model="MODEL_COL_FIELD"/>'}
+      ];
+      var grid =  gridClassFactory.createGrid({columnDefs:colDefs });
+      var rows = [
+        new GridRow(entity,1,grid)
+      ];
+
+      $timeout(function () {
+        grid.buildColumns();
+      });
+      $timeout.flush();
+      grid.modifyRows([entity]);
+      grid.preCompileCellTemplates();
+
+      var row = grid.rows[0];
+      expect(grid.getColumn('simpleProp').compiledElementFn).toBeDefined();
+
+    }));
 
     it('should bind correctly to simple prop', function() {