Javascript ng在slickgrid格式化程序中单击不';行不通
我是angularJS的新手 我将angularJS与ui路由器和光滑网格一起使用 我尝试通过单击图像调用一个方法来调用web服务并删除该行 我有一个控制器:Javascript ng在slickgrid格式化程序中单击不';行不通,javascript,angularjs,slickgrid,Javascript,Angularjs,Slickgrid,我是angularJS的新手 我将angularJS与ui路由器和光滑网格一起使用 我尝试通过单击图像调用一个方法来调用web服务并删除该行 我有一个控制器: app.controller('customerController', ['$scope', '$compile', 'CustomerService', function ($scope, $compile, CustomerService) { // function to get customers $s
app.controller('customerController', ['$scope', '$compile', 'CustomerService', function ($scope, $compile, CustomerService) {
// function to get customers
$scope.getCustomers = function () {
CustomerService.getCustomers($("#userId").val(), $scope.getArchived).then(function (customers) {
dataView.beginUpdate();
dataView.setItems(customers);
dataView.endUpdate();
grid.invalidate();
}, function (reason) {
noty({ text: reason, type: 'error' });
});
}
// function to archive customer
$scope.archiveCustomer = function(customerId) {
if (confirm(translate("LBL_DELETE_CUSTOMER_CONFIRMATION"))) {
CustomerService.archiveCustomer(customerId).then(function () {
$scope.getCustomers();
}, function (reason) {
noty({ text: reason, type: 'error' });
});
}
return false;
}
// create grid
var dataView,
grid;
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
autoHeight: true
};
var columns = [
{ id: "id", name: "", field: "id", width: 20, formatter: deleteFormatter, cssClass: "centeredColumn" },
{ id: "customer", name: translate("Customer"), field: "customer", width: 250 }
];
function deleteFormatter(row, cell, value, columnDef, dataContext) {
html = "<img src='images/delete.gif' alt='" + translate("LBL_DELETE_CUSTOMER") + "' style='cursor:pointer;' ng-click='archiveCustomer(" + dataContext.id + ");' />";
linker = $compile(angular.element(html));
htmlElements = linker($scope);
html = htmlElements[0].outerHTML;
return html;
}
dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#customersGrid", dataView, columns, options);
$scope.getCustomers();
}]);
格式化程序和渲染:
function asyncFormatter(row, cell, value, columnDef, dataContext) {
return "Data loading...";
}
function deleteRender(cellNode, row, dataContext, colDef) {
html = "<img src='images/delete.gif' alt='" + translate("LBL_DELETE_CUSTOMER") + "' style='cursor:pointer;' ng-click='archiveCustomer(" + dataContext.id + ");' />";
linker = $compile(angular.element(html));
htmlElements = linker($scope);
$(cellNode).empty()
cellNode.innerHTML = htmlElements[0].outerHTML;
}
function deleteFormatter(row, cell, value, columnDef, dataContext) {
return "<img src='images/delete.gif' alt='delete' style='cursor:pointer;' ng-click='archiveCustomer(" + dataContext.id + ");' />";
}
function deleteRender(cellNode, row, dataContext, colDef) {
// compile the html with angular to get ng-click with the correct scope
var interpolated = $interpolate($(cellNode).html())($scope);
var linker = $compile(interpolated);
var htmlElements = linker($scope);
$(cellNode).empty()
$(cellNode).append(htmlElements);
}
函数异步格式化程序(行、单元格、值、列定义、数据上下文){
返回“数据加载…”;
}
函数deleteRender(cellNode、row、dataContext、colDef){
html=“”;
linker=$compile(angular.element(html));
htmlElements=链接器($scope);
$(cellNode).empty()
cellNode.innerHTML=htmlElements[0].outerHTML;
}
已更新
“格式化程序”似乎只是给定列的一个配置函数。您需要为该列使用一个呈现函数,如“asyncPostRender”。看
您的新元素(删除img)超出任何角度范围。在网格行的渲染事件中,您需要$compile将其编译为Angular。在Kursad Gulseven(谢谢)和 控制器声明:
app.controller('customerController', ['$scope', '$rootScope', '$compile', '$interpolate', 'CustomerService', function ($scope, $rootScope, $compile, $interpolate, CustomerService) {
列定义:
var columns = [
{ id: "id", name: "", field: "id", width: 20, formatter: asyncFormatter, asyncPostRender: deleteRender, cssClass: "centeredColumn" },
{ id: "customer", name: translate("Customer"), field: "customer", width: 250 }
];
var columns = [
{ id: "id", name: "", field: "id", width: 20, formatter: deleteFormatter, asyncPostRender: deleteRender, cssClass: "centeredColumn" },
{ id: "customer", name: translate("Customer"), field: "customer", width: 250 }
];
格式化程序和渲染:
function asyncFormatter(row, cell, value, columnDef, dataContext) {
return "Data loading...";
}
function deleteRender(cellNode, row, dataContext, colDef) {
html = "<img src='images/delete.gif' alt='" + translate("LBL_DELETE_CUSTOMER") + "' style='cursor:pointer;' ng-click='archiveCustomer(" + dataContext.id + ");' />";
linker = $compile(angular.element(html));
htmlElements = linker($scope);
$(cellNode).empty()
cellNode.innerHTML = htmlElements[0].outerHTML;
}
function deleteFormatter(row, cell, value, columnDef, dataContext) {
return "<img src='images/delete.gif' alt='delete' style='cursor:pointer;' ng-click='archiveCustomer(" + dataContext.id + ");' />";
}
function deleteRender(cellNode, row, dataContext, colDef) {
// compile the html with angular to get ng-click with the correct scope
var interpolated = $interpolate($(cellNode).html())($scope);
var linker = $compile(interpolated);
var htmlElements = linker($scope);
$(cellNode).empty()
$(cellNode).append(htmlElements);
}
你能把这个放在JSFiddler中复制吗?我不知道如何用JSFiddler中的路由器、控制器和视图重新创建我的环境。左边你有“资源”选项,这样你就可以添加外部css和js依赖项。对不起,只是重写代码时出错了:我的代码中有一些双引号。控制台中没有错误该img的实时Html是什么?如果通过实时Html告诉Html通过angular生成,则是:这不起作用。img正在渲染,但ng单击无效。查看我的编辑我阅读了SlickGrid文档和问题。请参阅本部分底部的mleibman文章,“您不能在格式化程序中以编程方式创建DOM节点,只能创建HTML字符串”,他说。我认为你需要找到另一种方法。如果你能制作一把简单的小提琴,那么我会尽力帮你找到一个解决办法。