javascript - ng-click in slickgrid formatter doesn't work -

javascript - ng-click in slickgrid formatter doesn't work -

i'm newbie in angularjs

i utilize angularjs ui-router , slickgrid seek phone call method click on image phone call web service , delete row

i have controller :

app.controller('customercontroller', ['$scope', '$compile', 'customerservice', function ($scope, $compile, customerservice) { // function 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 archive client $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' }); }); } homecoming 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; homecoming html; } dataview = new slick.data.dataview({ inlinefilters: true }); grid = new slick.grid("#customersgrid", dataview, columns, options); $scope.getcustomers(); }]);

my problem ng-click on img element added deleteformatter. wrong? saw sample directive it's not clear in mind... lite me?

edit

try asyncpostrender without success: columns definition :

var columns = [ { id: "id", name: "", field: "id", width: 20, formatter: asyncformatter, asyncpostrender: deleterender, cssclass: "centeredcolumn" }, { id: "customer", name: translate("customer"), field: "customer", width: 250 } ];

formatter , render:

function asyncformatter(row, cell, value, columndef, datacontext) { homecoming "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; }

updated

"formatter" seem configuration function of given column. need utilize render function column "asyncpostrender". see this example.

your new element (delete img) out of angular scope. need $compile angular in render event of grid row.

javascript angularjs slickgrid