gpt4 book ai didi

javascript - ng-click 在 slickgrid 格式化程序中不起作用

转载 作者:行者123 更新时间:2023-11-30 17:12:25 25 4
gpt4 key购买 nike

我是angularJS的新手

我将 angularJS 与 ui-router 和 slickgrid 一起使用我尝试通过单击图像来调用一种方法来调用 Web 服务并删除该行

我有这个 Controller :

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();
}]);

我的问题出在 deleteFormatter 添加的 img 元素上的 ng-click。怎么了?我看到了带有指令的样本,但我脑子里不太清楚...你能点亮我吗?

编辑

尝试使用 asyncPostRender 但没有成功:列定义:

var columns = [
{ id: "id", name: "", field: "id", width: 20, formatter: asyncFormatter, 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;
}

最佳答案

已更新

“格式化程序”似乎只是给定列的配置函数。您需要为该列使用渲染函数,例如“asyncPostRender”。参见 this example .

您的新元素(删除 img)不在任何 Angular 范围内。你需要在grid row的render事件中$compile成Angular。

关于javascript - ng-click 在 slickgrid 格式化程序中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26733887/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com