使用带有角度xeditable的bootstrap-datepicker

Question

我有一个表,我想在该表中添加内联编辑.我开始使用ng-grid,然而,我认为虽然它运行良好,但我花了太多时间来修复样式,以便它与我网站的整体主题相匹配.我开始新鲜,我现在使用一个普通的旧html表与angularjs在幕后为其令人敬畏的双向数据绑定属性.

一切都进展顺利,除了一个事实,即我被困在试图让行内编辑与引导,日期选择器的工作:http://www.eyecon.ro/bootstrap-datepicker/?utm_source=twitterfeed&utm_medium=twitter.我使用这个日期选择器而不是xeditable说你应该使用的ui-bootstrap datepicker的原因是因为它在我的网站中看起来或感觉不对.这是ui-bootstrap datepicker的样子http://jsfiddle.net/NfPcH/23/.我喜欢bootstrap datepicker的简单外观.

这是一个带有可编辑和日期字段的表的plunker,可以尝试编辑PLUNKER

使用bootstrap-datepicker作为输入字段工作正常,使用自定义指令正确更新模型:

editablegrid.directive('datepicker', function() {
return {
    restrict : 'A',
    require : 'ngModel',
    link : function(scope, element, attrs, ngModelCtrl) {
        $(function() {
            var dp = $(element).datepicker({
                format : 'MM dd, yyyy'
            });

            dp.on('changeDate', function(e) {
                ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
                scope.$apply();
            });
        });
    }
}

我更改了可编辑的源代码以使用bootstrap-datepicker(请参阅xeditable.js的第78-84行)

/*
The New directive I've made for xeditable to use with the bootstrap-datepicker
*/
angular.module('xeditable').directive('editableBsdateNew', ['editableDirectiveFactory',
  function(editableDirectiveFactory) {
    return editableDirectiveFactory({
      directiveName: 'editableBsdateNew',
      inputTpl: '<input type="text" class="form-control form-control-inline input-sm" datepicker>'
     });
}]);

但问题出在xeditable的某处,以及它如何更新所选行的模型.

xeditable非常适合在线编辑文本和下拉列表,尝试与bootstrap-datepicker集成是很困难的.

如果还有其他方法可以使用bootstrap-datepicker进行内联编辑,我不会反对尝试它.我在想,如果这不起作用,也许使用ng-show和ng-hide的东西就可以了.

Answer 1

1>确保安装两个库 - angular-xeditable - angular-bootstrap-datepicker

2>创建新指令

/*我为xeditable使用的新指令与bootstrap-datepicker一起使用*/

angular.module('xeditable').directive('editableBootstrapDatepicker', ['editableDirectiveFactory',   function(editableDirectiveFactory) {
     return editableDirectiveFactory({
       directiveName: 'editableBsdateNew',
       inputTpl: '<span ng-datepicker ng-options="datepickerOptions"></span>'
     });   } ]);

3>在HTML中添加如下内容:

<span editable-bootstrap-datepicker="yourDateModel" onbeforesave="validateBeforeSaveDate($data)">Date ...</span>