带有 AngularJS 编译模板的 Ag-Grid 标头组件

Question

我想在我的 AngularJS (v1.6.8) 页面的网格中使用 Ag-Grid 标题组件。我可以使用this answer 使组件工作，但它似乎不像已弃用的 headerCellRenderer 那样编译 AngularJS。

如何让 Header 组件编译 AngularJS？

这里有一个基本的例子：https://embed.plnkr.co/mUmNL1/

Answer 1

您需要为此使用$compile 服务。

getTemplate = function () {
  var str = $compile('<span ng-click="alertMsg()">{{getLabel()}}</span>')($scope)[0];
  return str;
};

看看这个 plunk：ag-grid angularjs custom header component

此外，您需要根据以下示例对CustomerHeader 的init 函数进行一些更改：Angular 1.x and ag-Grid Components

MakeHeaderComp.prototype.init = function (params) {
    this.eGui = document.createElement('div');
    this.eGui.innerHTML = '=> {{params.displayName}}';

    // create and compile AngularJS scope for this component
    this.$scope = $scope.$new();
    $compile(this.eGui)(this.$scope);
    this.$scope.params = params;
    // in case we are running outside of angular (ie in an ag-grid started VM turn)
    // we call $apply. we put in timeout in case we are inside apply already.
    setTimeout(this.$scope.$apply.bind(this.$scope), 0);
};