指令compile/pre函数中cellTemplate不生效，已查ui-grid issue仍无解

Hey there, I get why this is frustrating—you’ve checked the related thread but still can’t get that cellTemplate to behave when setting it in the compile or pre-link phase of your Angular directive. Let’s break down why this happens and how to fix it.

Why It’s Not Working #

The core issue here is timing. ui-grid handles most of its initialization heavy lifting during the directive’s link phase. When you set gridOptions.cellTemplate in the compile or pre-link function:

• The compile phase runs before the directive’s element links to the scope, so ui-grid hasn’t even started processing your grid options yet.
• The pre-link phase runs right after scope binding but before child elements are fully linked. By this point, ui-grid may have already parsed the initial gridOptions, and it won’t pick up the late-changed cellTemplate.

The Fix: Use the Post-Link Function #

The post-link phase is where you want to make dynamic changes to your gridOptions. This phase runs after all child elements (including the ui-grid itself) have been linked and initialized, so ui-grid will properly recognize your cellTemplate setup.

Here’s how to modify your directive:

angular.module('XXX').directive('myDirective', [function() {
  return {
    restrict: 'E',
    scope: {data: '='},
    templateUrl: 'myTemplate.html',
    link: function(scope, elem) {
      // Move your gridOptions setup to the post-link function
      var cT = '<div>Details</div>';
      scope.gridOptions = {
        columnDefs: [{
          field: 'myField',
          displayName: 'myFieldName',
          cellTemplate: cT // This will now be applied correctly
        }]
        // Add any other required grid options here
      };
    }
  };
}]);

Bonus: Updating CellTemplate After Grid Initialization #

If you ever need to change the cellTemplate after the grid is already up and running, you’ll need to tell ui-grid to refresh the column. Modify the columnDef directly and trigger a data change notification:

// Make sure you've registered gridApi first via gridOptions.onRegisterApi
scope.updateCellTemplate = function(newTemplate) {
  scope.gridOptions.columnDefs[0].cellTemplate = newTemplate;
  scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
};

Quick Check for Template Formatting #

Double-check your cellTemplate string is properly formatted. For multi-line HTML, use template literals (backticks) for cleaner, easier-to-read code:

var cT = `
  <div class="custom-cell">
    <span>{{row.entity.myField}}</span>
    <button ng-click="openDetails(row)">View Details</button>
  </div>
`;

That should get your cellTemplate working as expected!

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