CODEWITHSUNDEEP
javascriptangularjsag-grid
Karthik
Karthik

Reputation: 676

How do I render angular directive inside an ag-grid cellEditor Component?

I'm trying to render an angular autocomplete directive in a custom ag-grid cell editor. On rendering, the directive is not compiled but rather the raw html is printed in cell editor. Is there anyway to get it to render as the angular directive?

Upvotes: 2

Views: 1925

Answers (2)

Niall Crosby
Niall Crosby

Reputation: 2411

make sure you have angularCompileRows=true to get angular 1 working inside ag-Grid

Upvotes: 1

Karthik
Karthik

Reputation: 676

I came up with the solution using angular's $compile to render the angular directive into html.

Code:

CategoryEditor.prototype.init = function (params) {
  this.container = document.createElement('div');
  this.container.tabIndex = "0";

  this.dropdown = document.createElement('div');
  this.dropdown.setAttribute("dynamic", "html");
  this.container.appendChild(this.dropdown);
  //My directive is of the form <div dynamic="html"></div>

  var that = this;
  $scope.selectedCallback = function ($item) {
    that.selectCategory($item);
    params.stopEditing();
  };
  $compile(this.container)($scope);
  $scope.$digest();
};

Upvotes: 1

Related Questions