自定义单元格渲染器的行动不会触发handsontable

Question

我的表HTML如下：

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

我的选择：

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

     } 
    ]; 

我的渲​​染器：

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

细胞呈现正常但ng-click未触发。我什至试图只是a href但链接也无法正常工作。看起来像我必须做些像stopPropagation或preventDefault但我应该怎么做？

Answer 1

这对您来说可能太迟了，但您需要在$scope上使用$compile HTML，以便指令绑定到元素。像这样的应该做的伎俩：

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