ng slickgrid格式化程序中的点击'不起作用

ng-click in slickgrid formatter doesn't work

本文关键字：不起作用 slickgrid 格式化 程序 ng      更新时间：2023-09-26

我是angularJS 的新手

我使用angularJS与ui路由器和slickgrid我试图通过点击图像调用一个方法来调用web服务并删除行

我有这个控制器：

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点击。怎么了？我看到了有指示的样品，但我脑子里不清楚。。。你能点灯给我吗？

编辑

尝试使用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"的渲染函数。请参见此示例。

您的新元素（删除img）超出了任何Angular范围。您需要在网格行的渲染事件中将其$编译为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: deleteFormatter, asyncPostRender: deleteRender, cssClass: "centeredColumn" },
    { id: "customer", name: translate("Customer"), field: "customer", width: 250 }
];

格式化程序和渲染：

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

档案客户功能：

$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' });
        });
    }
}
相关文章：