自定義單元格渲染器的行動不會觸發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; 
};