使用AnhularJS指令刷新Kendo细节

Question

我正在使用自动定义数据源并为每个项目加载子网格的网格。

此标记是相当简单的

<div class="thegrid" 
    kendo-grid 
    k-data-source="vm.GeneralData" 
    k-options="vm.gridMainOptions"> 
    <div k-detail-template> 
     <div kendo-grid k-options="vm.detailGridOptions(dataItem)"></div> 
    </div> 
</div> 

在子格详细模板，我有响应于ng-click事件触发的事件的网格列。

columns: [ 
{ 
    field: "Id", 
    editable: false, 
    hidden: true 
}, 
{ 
    title: "", 
    width: "160px", 
    editable: false, 
    template: 
    "<span class='glyphicon glyphicon-remove remove-template' 
      ng-click='vm.removeItem(dataItem)'></span><", 
    attributes: { 
    "class": "managing-templates-column", 
    "title": "Delete This Template" 
} 

]

在控制器自身，我有响应此的方法。

function removeItem(dataItem) { 

    console.log("remove", dataItem); 
    //removed code that makes an ajax call to actually delete item 

    //... and now need to refesh that datasource that this belongs to. 

} 

我怎么会去获取dataItem的数据源，这样我可以刷新吗？

Answer 1

在剑道的模板引擎里面你可以使用data这个对象，其实就是你的dataItem。试试这个：

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem(data)'></span>" 

如果不工作，尝试通过DOM到达的DataItem：

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem(this)'></span>" 

然后：

function removeItem(span) { 
    var $tr = $(span).closest("tr"), 
     grid = $tr.closest(".k-grid").data("kendoGrid"), 
     dataItem = grid.dataItem($tr); 
} 

UPDATE

基于this answer ，试试这个：

"<span class='glyphicon glyphicon-remove remove-template' ng-click='vm.removeItem($event)'></span>" 

而且......

function removeItem($event) { 
    var $tr = $($event.currentTarget).closest("tr"), 
     grid = $tr.closest(".k-grid").data("kendoGrid"), 
     dataItem = grid.dataItem($tr); 
}