ng-click 在 ag-grid 标题模板内答案

【问题标题】：ng-click inside ag-grid header templateng-click 在 ag-grid 标题模板内
【发布时间】：2016-05-11 20:37:36
【问题描述】：

我已经为标题定义了模板：

  headerCellTemplate: function () {
            var eCell = document.createElement('span');
            eCell.innerHTML = '<span ng-click="deleteColumn()" class="glyphicon glyphicon-minus"></button></span>';
            return eCell;
        }

而且我的控制器中也有功能：

$scope.deleteColumn = new function(){
    console.log("test");
}

如何让 ag-grid 从我的 $scope 调用 deleteColumn()？因为现在点击不是从父范围调用方法。

【问题讨论】：

你必须编译模板。像 $compile(cellHtml)($scope)
@x-act 我应该在 headerCellTemplate 函数中编译它吗？或者我应该从 jquery 获取这个 html，然后 $compile？

标签： javascript angularjs ag-grid

【解决方案1】：

很遗憾，不支持在 headerTemplates 中进行角度编译。您必须使用 headerCellRenderer。

这应该可行：

headerCellRendererFunc: function (params) {
    // set the right scope for the grid params
    params.$scope.deleteColumn = $scope.deleteColumn;

    var eCell = document.createElement('span');
    eCell.innerHTML = '<span ng-click="deleteColumn()" class="glyphicon glyphicon-minus"></button></span>';
    return eCell;
}

还要确保您在 gridOptions 中启用了对标题的角度编译：

$scope.gridOptions =
{
    ...
    headerCellRenderer: headerCellRendererFunc,
    angularCompileHeaders: true,
    ...
}

【讨论】：