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

Question

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

如何使 Header 组件编译 AngularJS？

有关基本示例，请参见此处：https ://embed.plnkr.co/mUmNL1/

标签： angularjsag-grid

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 和 ag-Grid 组件

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);
};