AngularJS ngGrid问题，当使用jQuery的日期选择器单元编辑 [英] AngularJS ngGrid issue when cell editing using jQuery datepicker

问题描述

我使用的NG-电网从AngularJS UI，使一格，并希望有使用jQuery日期选择器一个日期细胞编辑。结果
问题是，日期选择器弹出窗口时，弹出窗口中的任何点击（是否要选择一个日期或更改月份），模糊了NG-电网输入字段出现JS错误此日期选择未捕获缺少实例数据。

下面

code片段。结果
任何帮助是AP preciated。谢谢！

=== HTML

 ＆LT; D​​IV NG控制器=MyCtrl1＆GT;
    ＆LT; D​​IV CLASS =gridStyleNG格=gridOptionsNG-秀=看得见＆GT;＆LT; / DIV＆GT;
  ＆LT; / DIV＆GT;
 

===网格选项对于单元控制器中的

  {
    现场：loanEndDate'，
    显示名：贷款结束'，
    enableCellEdit：真实，
    editableCellTemplate：'＆LT;输入类型=文本日期选择器NG-模式=$ parent.currentDateNG-输入=COL_FIELD/＆GT;'
  }
 

=== ANGULAR JS DIRECTIVE

 指令（日期选择器，功能（）{
返回{
    限制：'A'，
    要求：'？ngModel'，
    范围： {}，
    链接：功能（范围，元素，ATTRS，ngModel）{
        如果（ngModel！）回报;        变种optionsObj = {};        optionsObj.dateFormat ='DD / MM / YY';
        VAR的UpdateModel =功能（日期）{
            范围。$应用（函数（）{
                ngModel $ setViewValue（日期）。
            }）;
        };        optionsObj.onSelect =功能（日期选择器）{
            的UpdateModel（日期）;
        };        ngModel。$ =渲染功能（）{
            element.datepicker（'的setDate'，ngModel $ viewValue ||''）;
        };
        element.datepicker（optionsObj）;
    }
};
}）;
 

解决方案

我觉得我有一个非常类似的问题，对于这​​个问题的答案可以在这里找到：<一href=\"http://stackoverflow.com/a/20813720/3087367\">http://stackoverflow.com/a/20813720/3087367

的本质是自己的模板应该好好沟通，通过侦听通过关注你的编辑元素ngGridEventStartCellEdit事件NG-电网，而最重要的是：你的组件时，细胞失去重点必须发出ngGridEventEndCellEdit事件（或当您希望编辑消失，譬如当pressing进入或东西）。

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

I am using ng-grid from AngularJS UI to make a grid and want to have a date cell editable using jQuery datepicker.
The issue is that when the datepicker popup appears, any click inside the popup (whether to select a date or to change the month), blurs the ng-grid input field and a JS error occurs "Uncaught Missing instance data for this datepicker".

Code snippets below.
Any help is appreciated. Thank you !

=== HTML

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

=== GRID OPTIONS FOR THE CELL IN THE CONTROLLER

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

解决方案

I think I had a very similar problem, for which the answer can be found here: http://stackoverflow.com/a/20813720/3087367

The essence is that your own template should properly communicate to ng-grid by listening to the ngGridEventStartCellEdit event by focusing your editor element, and the most important thing is: your component MUST emit the ngGridEventEndCellEdit event when the cell loses focus (or when you want the editor to disappear, like maybe when pressing enter or something).

Hope this helps you fix your problem.

这篇关于AngularJS ngGrid问题，当使用jQuery的日期选择器单元编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！