AngularJS单元格导航在与单元格模板一起使用时不起作用

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 和单元格自定义样式。