angular-ui-grid中ng-click等功能失效，求准确文档及解决方案

Hey there, let's tackle the problems you're facing one by one—UI-Grid can be tricky with scope and configuration details, but most of these issues have straightforward fixes:

1. ng-click Not Working on Cells #

UI-Grid uses isolated scopes for its cells, so plain ng-click won't directly access your controller's scope. You have two reliable options:

Option A: Use grid.appScope in Custom Cell Templates #

Reference your controller's methods via grid.appScope (this exposes your main $scope to the cell's isolated scope):

columnDefs: [
  {
    name: 'action',
    cellTemplate: '<button ng-click="grid.appScope.handleCellClick(row.entity)">Click Me</button>'
  }
]

Then define the method in your controller:

$scope.handleCellClick = function(entity) {
  console.log('Clicked entity:', entity);
  // Add your click logic here
};

Option B: Register a Grid API Event #

Use UI-Grid's built-in cellClick event to handle clicks across all cells or specific columns:

$scope.gridOptions.onRegisterApi = function(gridApi) {
  $scope.gridApi = gridApi;
  
  // Listen for cell clicks
  gridApi.cellClick.on.cellClick($scope, function(row, col, event) {
    console.log('Clicked cell:', row.entity, col.field);
    // Your click logic here
  });
};

2. ng-class Not Applying #

Similar to ng-click, the cell's isolated scope can't directly access your controller's scope variables. Use grid.appScope to reference your class logic:

columnDefs: [
  {
    name: 'status',
    cellTemplate: '<div ng-class="grid.appScope.getStatusClass(row.entity.status)">{{row.entity.status}}</div>'
  }
]

In your controller:

$scope.getStatusClass = function(status) {
  return status === 'active' ? 'bg-green' : 'bg-gray';
};

Also, make sure your CSS classes are globally accessible (UI-Grid's cells are nested deep in its DOM structure, so avoid scoped styles unless you use deep selectors like .ui-grid-cell >>> .bg-green).

3. width: '*' Not Working #

The width: '*' property tells UI-Grid to fill remaining space, but it requires specific conditions to work:

• Set fixed widths for other columns: At least one column should have a fixed pixel width so UI-Grid can calculate the remaining space to allocate.
• Ensure the grid container has a defined width: The grid's parent element needs an explicit width (e.g., width: 100% or a fixed pixel value) so the grid knows how much space to work with.
• Check for conflicting settings: Avoid setting minWidth or maxWidth that might restrict the column's ability to expand.

Example of a working configuration:

$scope.gridOptions = {
  columnDefs: [
    { name: 'id', width: 80 }, // Fixed width
    { name: 'fullName', width: '*' }, // Fills remaining space
    { name: 'role', width: 120 } // Fixed width
  ],
  enableColumnResizing: true // Optional, lets users adjust columns manually
};

Official UI-Grid Documentation for v4.2.3 #

It’s true that UI-Grid’s docs can feel scattered if you’re looking at the wrong version. For your specific v4.2.3 release:

• Check the GitHub repository’s tagged version (look for the v4.2.3 tag) — the docs folder contains version-specific guides and API references.
• The official UI-Grid site hosts versioned docs, so make sure you select v4.x from the version dropdown to get accurate information for your setup.

内容的提问来源于stack exchange，提问作者user6388353