нг щелкните в slickgrid форматировщиком не работает

Question

Я новичок в angularJS

Я использую angularJS с Ui-маршрутизатором и slickgrid я пытаюсь вызвать метод из мыши на изображение, чтобы назвать веб-службы и удалить строку

у меня есть этот контроллер:

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

Моя проблема с нг кнопкой мыши на элементе IMG добавленной deleteFormatter. Что не так? Я видел образец с директивой, но это не ясно в моем сознании ... вы могли бы осветить меня?

Редактировать

Попробуйте с 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; 
} 

Answer 1

Ответ с помощью Kürşad Gulseven (Спасибо) и this post

Декларация контроллера:

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

Answer 2

ОБНОВЛЕНО

«formatter», по-видимому, является просто функцией конфигурации заданного столбца. Вам нужно использовать функцию рендеринга для этого столбца, например «asyncPostRender». См. this example.

Ваш новый элемент (удалить img) выходит за рамки любого угла. Вам нужно скомпилировать его в Angular в событии рендеринга строки сетки.