AngularJS細胞的導航，同時與celltemplate

Question

我有我的控制器下面的代碼使用不工作：

app.controller("homeController", homeController); 
homeController.$inject = ["ui.grid.cellNav", "$scope"]; 

$scope.gridOptions = { 
     enableRowSelection: true, 
     enableSelectAll: true, 
     modifierKeysToMultiSelect: false,   
     enableRowHeaderSelection: false, 
    }; 


vm.objectViewGridOptions = { 
    enableColumnMenus: false, 
    enableSorting: true, 
    enableGridMenu: true, 
    angularCompileRows: true, 
    multiSelect: false, 
    modifierKeysToMultiSelect: false,       
    enableRowSelection: true, 
    enableRowHeaderSelection: false, 
    exporterMenuPdf: false, 
    onRegisterApi: function (gridApi) { 
    //set gridApi on scope 
    vm.objectViewGridOptions.gridApi = gridApi;        
    gridApi.cellNav.on.navigate($scope, function (newRowCol, oldRowCol){     
            vm.objectViewGridOptions.gridApi.selection.selectRow(newRowCol.row.entity); 
            vm.objectViewGridOptions.gridApi.core.notifyDataChange($scope.gridApi.grid, uiGridConstants.dataChange.COLUMN); 
    }); 
    }  
}; 


var colDef = [];    

for (var i = 0; i < columnNames.length; i++) { 
        if (i < 4) { 
         colDef.push(
         { 
          field: columnNames[i], 
          displayName: columnNames[i], 
          width: '100', 
          // Highlighting first row in ui-grid 
          cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>', 
          sortingAlgorithm: sort 
         }); 
        } 
        else 
         colDef.push(
         { 
          field: columnNames[i], 
          displayName: columnNames[i], 
          width: '100', 
          cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>', 
          sortingAlgorithm: sort 
         }); 
       } 

vm.objectViewGridOptions.columnDefs = colDef; 

在我的HTML：

<div style="clear:both;" ui-grid="vm.objectViewGridOptions" ng-if="vm.objectViewGridOptions.data" ui-grid-resize-columns ui-grid-cellnav ui-grid-move-columns ui-grid-exporter class="objectviewgrid"></div> 

我已經使用cellTemplate給背景顏色的網格單元和ui-grid-cellNav在網格單元之間導航。

如果我使用ui-grid-cellNav以及cellTemplate，則小區導航無法正常工作。如果我註釋掉cellTemplate代碼，那麼單元格導航工作正常。

我在哪裏被擊中？忘掉循環邏輯和所有。我不能在這裏放置整個代碼。這已經看起來很笨拙。

Answer 1

我已經使用了cellClass和cellStyle而不是cellTemplate。這是我的控制器中的代碼：

for (var i = 0; i < columnNames.length; i++) { 
         if (i < 4) { 
          colDef.push(
          { 
           field: columnNames[i], 
           displayName: columnNames[i], 
           width: '100', 
           // fix for highlighting first row in ui-grid 
           //cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,true)}">{{ COL_FIELD }}</div>', 
           cellClass: 'ui-grid-cell-contents', 
           cellStyle: { 'background-color': 'backgroundColor(row, true)' }, 
           sortingAlgorithm: sort 
          }); 
         } 
         else 
          colDef.push(
          { 
           field: columnNames[i], 
           displayName: columnNames[i], 
           width: '100', 
           //cellTemplate: '<div ui-grid-selection class="ui-grid-cell-contents" ng-style="{\'background-color\':grid.appScope.getBackgroundColor(row,false)}" >{{ COL_FIELD }}</div>', 
           cellClass: 'ui-grid-cell-contents', 
           cellStyle: { 'background-color': 'backgroundColor(row, false)' }, 
           sortingAlgorithm: sort 
          }); 
        } 

上面的代碼允許我同時使用cellNav和cell自定義樣式。