我的表格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
那样,但我应该在哪里以及如何做到这一点?
答案 0 :(得分:1)
这可能为时已晚,对您没什么用处,但您需要$compile
$scope
上的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;
};