Custom cell renderer action not triggered in hands

Question

My table html looks like:

<hot-table
                     settings="settings"
                      row-headers="rowHeaders"
                      min-spare-rows="minSpareRows"
                      datarows="myData"
                      columns="columns"
                         >
</hot-table>

My options:

$scope.columns = [
      ...
        {
            data:'name',
           readOnly:true,
            renderer:$scope.myRenderer

        }
    ];

My renderer:

$scope.myRenderer = function(hotInstance, td, row, col, prop, value, cellProperties) {
        var metaId = hotInstance.getDataAtRowProp(row, 'metaId');
        var specificationCode = hotInstance.getDataAtRowProp(row, 'specificationCode');
        if(value && specificationCode) {
            td.innerHTML = '<a ng-click=\"openSpecification('+metaId+','+prop+','+specificationCode+')\">'+value+'</a>';
            console.log(td.innerHTML);
        }
    };

Cell rendered properly but ng-click not triggered. I even tried just a href but link also not working. Looks like I have to make someting like stopPropagation or preventDefault but where and how should I do that?

Answer 1

This is probably too late to be of much use to you, but you'll need to $compile the HTML on your $scope in order for the directives to bind to the element. Something like this should do the trick:

$scope.myRenderer = function(hotInstance, td, row, col, prop, value, cellProperties) {
  var metaId = hotInstance.getDataAtRowProp(row, 'metaId');
  var specificationCode = hotInstance.getDataAtRowProp(row, 'specificationCode');
  var value = '<a ng-click=\"openSpecification('+metaId+','+prop+','+specificationCode+')\">'+value+'</a>';
  var el = $compile(value)($scope);

  if (!(td != null ? td.firstChild : void 0)) {
    td.appendChild(el[0]);
  }
  return td;
};