Angular 1.x升级AG-Grid v16：自定义单元格渲染器问题求助

你遇到的问题核心在于没有正确管理Angular的独立子scope，以及没有在AG-Grid的生命周期内正确触发Angular的变更检测。我来拆解下问题并给出最优解：

你的初始实现为什么失效？ #

第一个版本的代码有两个关键问题：

• 直接使用父级$scope，没有创建AG-Grid要求的独立子scope，这不仅会污染父scope，还会导致绑定无法正确隔离
• 你把编译后的元素的html()内容赋值给了eGui.innerHTML，这相当于只复制了静态文本，Angular编译后的指令和绑定逻辑并没有被真正挂载到DOM中，自然无法生效

为什么$timeout能临时解决？ #

$timeout会自动触发一次Angular的摘要循环（digest cycle），并且把你的编译逻辑放到了Angular的异步队列里，让AG-Grid先完成DOM挂载，之后再注入编译后的元素。但这种方式是绕开了问题本质，还可能带来不必要的延迟和潜在的内存泄漏风险。

正确的实现方式（不依赖$timeout） #

按照AG-Grid的要求，我们需要在init()中创建独立子scope，编译模板后直接挂载DOM，手动触发变更检测，最后在destroy()中销毁scope：

function MyCellRenderer() {}

MyCellRenderer.prototype.init = function(params) {
    // 1. 创建独立子scope，继承父scope的上下文，避免污染
    this.scope = $scope.$new(true);
    
    // 2. 传递AG-Grid的参数到scope中，比如单元格数据
    this.scope.myMessage = params.value || 'Hi Scott';
    this.scope.checkboxModal1 = params.data.checkboxState; // 假设从行数据取状态
    
    // 3. 编译模板，直接关联到子scope
    var template = '<p ng-bind="myMessage"></p><nice-checkbox checkbox-id="checkbox-{{params.colId}}-{{params.rowIndex}}" ng-model="checkboxModal1"></nice-checkbox>';
    var compiledElement = $compile(template)(this.scope);
    
    // 4. 创建容器并挂载编译后的元素
    this.eGui = document.createElement('span');
    this.eGui.appendChild(compiledElement[0]);
    
    // 5. 手动触发一次digest，让Angular处理绑定（因为AG-Grid的init不在Angular循环内）
    this.scope.$digest();
};

MyCellRenderer.prototype.getGui = function() {
    return this.eGui;
};

MyCellRenderer.prototype.destroy = function() {
    // 6. 销毁子scope，清理内存，避免泄漏
    this.scope.$destroy();
};

关键要点说明 #

• 独立子scope：使用$scope.$new(true)创建隔离的子scope，true表示不继承父scope的属性（如果需要继承可以传false），确保每个单元格的scope独立
• 直接挂载编译元素：不要用innerHTML，而是用appendChild把编译后的DOM元素直接添加到容器，这样Angular的指令和绑定才能正常工作
• 手动触发digest：AG-Grid的init方法运行在Angular的上下文之外，所以需要手动调用$digest()来触发绑定更新
• 销毁scope：必须在destroy方法中调用$scope.$destroy()，否则会导致内存泄漏，尤其是在表格频繁刷新或分页时

这样实现既符合AG-Grid v16的要求，又不需要依赖$timeout，同时保证了Angular绑定的正确性和内存的高效管理。

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