Шаблон ячейки ng-click action никогда не срабатывает

Question

У меня есть динамический вызов ng-click внутри вызова cellTemplate, который должен запускать вызов функции, чтобы открыть ранее определенный Ionic-модальный, но когда я запускаю событие click на записи в datagrid, связанный вызов функции функции никогда не срабатывает.

Неясно, вызвана ли проблема проблемой области видимости или механизмом вызова функции вызова. Какие-нибудь идеи относительно причины?

//Generator for edit links in the grid cell 
$scope.makeEditButtons = function (gridName) { 
    return "<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i>&nbsp;&nbsp;<i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>"; 
}; 

//Cell declarations for grid for "Custom Costs" 
$scope.custom_costs_columns = [ 
    {field: "description", displayName: "Description", width: '35%'}, 
    {field: 'cost', displayName: "Cost", width: '35%', cellClass: 'text-right', cellFilter: 'currency'}, 
    {field: 'edit', displayName: "Actions", cellTemplate: $scope.makeEditButtons("CustomCost"), cellClass: 'text-center'} 
]; 

// UI-Grid initalize 
$scope.CustomCostOptions = { 
    enableSorting: true, 
    columnDefs: $scope.custom_costs_columns, 
    enableCellSelection: true, 
    enableRowSelection: false, 
    enableCellEdit: false, 
    onRegisterApi: function (gridApi) { 
     $scope.gridApi = gridApi; 
    } 
}; 

//Ionic Modal declare and click function 
$scope.deleteCustomCostModal = $ionicModal.fromTemplate({{Template}}, function ($ionicModal) { 
    $scope.modal = $ionicModal; 
}, 
    { 
     scope: $scope, 
     focusFirstInput: true 
    }); 
$scope.openDeleteCustomCostModal = function (row) { 
    console.debug(row); 
    $scope.deleteCustomCostModal.show(); 
}; 

Answer 1

Одним из возможной проблемы с не в состоянии нажать на созданную кнопку потому, что $ сфера не получила скомпилированный elemt еще.

Измените функцию

$scope.makeEditButtons = function (gridName) { 
    return $compile("<i class='icon ion-gear-a' ng-click='openEdit" + gridName + "Modal(row.entity)' title='Edit' style='cursor:pointer;'></i>&nbsp;&nbsp;<i class='icon ion-alert' ng-click='openDelete" + gridName + "Modal(row.entity)' title='Delete' style='cursor:pointer;'></i>")($scope); 
}; 

Используйте следующую функцию и вызвать его прямо перед событием щелчка.

$scope.applyToview=function(){  if ($scope.$root.$$phase != '$apply' && 
      $scope.$root.$$phase != '$digest') { 
      $scope.$apply(); 

     } 
    } 

Удачи.

Answer 2

Во-первых, вам нужно объявить функцию обработки события click в appScopeProvider. Затем вызовите его в CellTemplate

Ex:

vm.gridOptions = { 
      columnDefs: [ 
       {field: 'edit', displayName: "Actions", cellTemplate: '<span ng-click="grid.appScope.clickHandler(row)">Edit</span>'} 
      ], 
     ................ 
      appScopeProvider: { 
        clickHandler: onCellClick 
       } 
     } 
     function onCellClick(row){ 
     console.log(row.entity); 
     } 

Надеется, что это помогает!

Answer 3

Во-первых, ваш cellTemplate должен быть именно этим. Он должен выглядеть примерно так:

cellTemplate: '<i class="icon ion-gear-a" style="text-decoration:underline; color: blue; cursor:pointer;" ng-click="grid.appScope.openDeleteCustomCostModal(row)">{{COL_FIELD}}</i><i class='icon ion-alert' ng-click="grid.appScope.deleteCostModal(row)" title='Delete' style='cursor:pointer;'></i>' 

Это вызовет две функции, которые у вас есть при нажатии.