Компонент заголовка Ag-Grid с скомпилированным шаблоном AngularJS

Question

Я хотел бы использовать компонент заголовка Ag-Grid в сетке на моей странице AngularJS (v1.6.8).Я могу заставить компонент работать, используя этот ответ , но, похоже, он не компилирует AngularJS, как это устарело headerCellRenderer.

Как заставить компонент заголовка компилировать AngularJS?

Базовый пример приведен здесь: https://embed.plnkr.co/mUmNL1/

Answer 1

Для этого вам нужно использовать сервис $compile.

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

Взгляните на этот план: пользовательский компонент заголовка ag-grid angularjs

Такжевам нужно будет внести несколько изменений в функцию CustomerHeader init, как показано в этом примере: Angular 1.x и 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);
};