Question

我在cellTemplate调用中有一个动态驱动的ng-click调用，它应该触发一个函数调用来打开一个先前定义的Ionic模式，但是当我在datagrid中的条目上运行click事件时，相关的范围函数调用永远不会火灾。

我不清楚问题是由范围范围引起的，还是构建函数调用的机制有问题。关于原因可能是什么想法？

//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

无法点击创建按钮的一个可能问题是因为$ scope尚未收到已编译的元素。

将功能修改为

$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

首先，您需要在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);
      }

希望它有所帮助！

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>'

这将调用您点击时的两个功能。

单元格模板ng-click操作永远不会触发

3 个答案: