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>

===控制器中的电池的网格选项

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

=== ANGULAR JS DIRECTIVE

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事件（或者当你想让编辑器消失时，比如按下输入或其他东西时。）

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

使用jQuery datepicker进行单元格编辑时出现AngularJS ngGrid问题

1 个答案: