2016-08-23 80 views
0

我在cellTemplate調用中有一個動態驅動的ng-click調用,應該觸發一個函數調用來打開以前定義的Ionic模式,但是當我在datagrid,關聯的作用域函數調用永遠不會觸發。Cell Template ng-click action never fires

我不清楚問題是由範圍範圍引起的,還是構建函數調用的機制存在問題。任何想法可能是什麼原因?

//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(); 
}; 
+0

如果他們中的任何人幫助了您,請接受答案。 –

回答

0

不能點擊創建的按鈕的一個可能的問題是因爲$ scope還沒有收到編譯後的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); 
}; 

使用下面的功能和click事件之前正確調用它。

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

     } 
    } 

祝你好運。

0

首先,您需要聲明函數來處理appScopeProvider中的click事件。 然後調用它cellTemplate

例:

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

希望它能幫助!

0

首先,你的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>' 

這將調用您單擊時的兩個函數。

相關問題