Question

我正在使用Angular UI-Grid v3.0.4。我正在使用columndef cell-template来获得如下所需的自定义（我在celltemplate中有ng-blur事件和方法）。

   $scope.gridOptions = {
           showColumnFooter: true,
           columnDefs: [
                        {
                            name: "SalesAmount", displayName: "Sales Amount"
                        },
                        {
                            name: "CommissionAmount", displayName: "Commission Amount", enableCellEdit: true, enableCellEditOnFocus: true,
                            cellTemplate: '<input type="text" ng-model="row.entity.pddCommissionAmount" ng-blur="updateEntitys(row.entity)"></input>'
                        }

                       ]
                     };

ng-blur事件不会触发其执行。研究并添加自定义ngblur指令以查看是否有帮助

app.directive('ngBlur', function () {
    return function (scope, elem, attrs) {
        elem.bind('blur', function () {
            scope.$apply(attrs.ngBlur);
        });
    };
});



$scope.updateEntitys = function (row) {
             alert("Update Entitys within ngblur event");
         }

这似乎也不起作用。非常感谢任何帮助。

Answer 1

我不太了解ui-grid，但我相当确定它为什么不起作用的原因是所谓的＆＃34; cellTemplate＆＃34中的html ;永远不会编译，因为它实际上不是角度模板。我相信你可以使用$compile找到解决方法，将html传递给cellTemplate，同时将对象保存到某个变量，但我也认为这是一种令人难以置信的方式来做你想做的事情（不管是什么）？）。

相反，我认为您应该查看有关编辑功能的ui-grid文档：http://ui-grid.info/docs/#/tutorial/201_editable

我认为这就是你真正想要的东西：

$scope.gridOptions.onRegisterApi = function(gridApi) {
  $scope.gridApi = gridApi;
  gridApi.edit.on.afterCellEdit($scope, function(rowEntity, colDef, newValue, oldValue) {
    console.log('edited row id:' + rowEntity.id + ' Column:' + colDef.name + ' newValue:' + newValue + ' oldValue:' + oldValue);
    $scope.$apply();
  });
};

http://plnkr.co/edit/GJfBpn0kIkhgrPAPUYSb?p=preview

Angular Ui-Grid ng-blur事件不会触发

1 个答案: