自定义组件未加载到 ig-grid 列模板中
Custom component not loading in ig-grid column template
我正在尝试在 ig-grid 列模板中使用定制组件。组件在 Html 中正确呈现,但它永远不会到达组件的构造函数。如何在列模板中使用自定义组件?
<script id="colTmpl" type="text/template">
<custom-component data="${datatouse}"></custom-component>
</script>
<div>
<ig-grid id="grid1" data-source="vm.datasource" width="100%" primary-key="Id" auto-generate-columns="false" autocommit="true">
<columns>
<column key="Id" header-text="Id" width="50px" data-type="number" hidden="hidden"></column>
<column key="datatouse" width="100%" header-text="my custom component" datatype="object" template="{{getHtml('#colTmpl')}}"></column>
</columns>
</ig-grid>
</div>
您可以覆盖 Ignite UI 模板 ($.ig.tmpl
) 并将自定义组件应用于单元格。
$.ig.tmpl = function (tmpl, data) {
angCells.push($compile(tmpl)($scope));
return "";
}
这是一个fiddle。
我正在尝试在 ig-grid 列模板中使用定制组件。组件在 Html 中正确呈现,但它永远不会到达组件的构造函数。如何在列模板中使用自定义组件?
<script id="colTmpl" type="text/template">
<custom-component data="${datatouse}"></custom-component>
</script>
<div>
<ig-grid id="grid1" data-source="vm.datasource" width="100%" primary-key="Id" auto-generate-columns="false" autocommit="true">
<columns>
<column key="Id" header-text="Id" width="50px" data-type="number" hidden="hidden"></column>
<column key="datatouse" width="100%" header-text="my custom component" datatype="object" template="{{getHtml('#colTmpl')}}"></column>
</columns>
</ig-grid>
</div>
您可以覆盖 Ignite UI 模板 ($.ig.tmpl
) 并将自定义组件应用于单元格。
$.ig.tmpl = function (tmpl, data) {
angCells.push($compile(tmpl)($scope));
return "";
}
这是一个fiddle。