Ag-Grid Header 具有 AngularJS 已编译模板的组件

Question

我想在 AngularJS (v1.6.8) 页面的网格中使用 Ag-Grid Header 组件。我可以使用让组件工作，但它似乎不像已弃用的 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);
};

Ag-Grid Header 具有 AngularJS 已编译模板的组件

Ag-Grid Header Component with AngularJS compiled template

angularjs

ag-grid