javascript - 使用 jQuery 日期选择器编辑单元格时 AngularJS ngGrid 问题

Question

我正在使用 AngularJS UI 中的 ng-grid 制作网格，并希望使用 jQuery datepicker 编辑日期单元格。
问题是，当日期选择器弹出窗口出现时，弹出窗口内的任何点击(无论是选择日期还是更改月份)都会模糊 ng-grid 输入字段，并出现 JS 错误“此日期选择器未捕获丢失的实例数据”。

以下代码片段。
任何帮助表示赞赏。谢谢!

=== HTML

  <div ng-controller="MyCtrl1">
    <div class="gridStyle" ng-grid="gridOptions" ng-show="visible"></div>
  </div>

=== Controller 中单元的网格选项

  {
    field: 'loanEndDate',
    displayName: 'Loan End',
    enableCellEdit: true,
    editableCellTemplate: '<input type="text" datepicker ng-model="$parent.currentDate" ng-input="COL_FIELD" />'
  }

=== Angular JS 指令

directive('datepicker', function() {
return {
    restrict: 'A',
    require: '?ngModel',
    scope: {},
    link: function(scope, element, attrs, ngModel) {
        if (!ngModel) return;

        var optionsObj = {};

        optionsObj.dateFormat = 'dd/mm/yy';
        var updateModel = function(date) {
            scope.$apply(function () {
                ngModel.$setViewValue(date);
            });
        };

        optionsObj.onSelect = function(date, picker) {
            updateModel(date);
        };

        ngModel.$render = function() {
            element.datepicker('setDate', ngModel.$viewValue || '');
        };
        element.datepicker(optionsObj);
    }
};
});

Answer 1

我想我有一个非常相似的问题，可以在这里找到答案:https://stackoverflow.com/a/20813720/3087367

本质是你自己的模板应该通过聚焦你的编辑器元素来监听 ngGridEventStartCellEdit 事件来正确地与 ng-grid 通信，最重要的是:你的组件必须在单元格失去焦点时发出 ngGridEventEndCellEdit 事件(或者当你想让编辑器消失时，比如按下 enter 或其他东西时)。

希望这可以帮助您解决问题。