Angularjs 使用具有角度可执行性的引导数据采集器

我有一个表，我想在该表中添加在线编辑。我从ng grid开始，然而，我决定，虽然它工作得很好，但我花了太多的时间尝试修复样式，以便它与我网站的总体主题相匹配。我从新开始，现在正在使用一个普通的旧html表，后台使用angularjs，以实现其令人敬畏的双向数据绑定特性

一切都进行得很顺利，除了我一直在尝试使用引导数据采集器进行内联编辑：。我之所以使用这个日期选择器，而不是xeditable说应该使用的ui引导日期选择器，是因为它在我的网站上看起来或感觉都不对。以下是ui引导日期选择器的外观

http://jsfiddle.net/NfPcH/23/

。我喜欢bootstrap datepicker简单朴素的外观

下面是一个包含可编辑字段和日期字段的表的插件，可供尝试和编辑

使用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();
            });
        });
    }
}

我将可编辑源代码更改为使用引导数据采集器（参见xeditable.js的第78-84行）

/*
我为xeditable制定的新指令用于引导数据采集器
*/
angular.module（'xeditable'）.directive（'editableBsdateNew'，['editableDirectiveFactory'，'，
函数（editableDirectiveFactory）{
返回editableDirectiveFactory({
directiveName:“editableBsdateNew”，
inputpl:'
});
}]);

但是，问题在于xeditable以及它如何更新所选行的模型

xeditable非常适合在线编辑文本和下拉列表，尝试与bootstrap datepicker集成被证明是困难的

如果有其他方法可以使用bootstrap datepicker进行在线编辑，我不反对尝试。我在想，如果这不起作用，也许ng show和ng hide的某些功能可能会起作用。

试试这个：

dp.on('changeDate', function(e) {
    ngModelCtrl.$setViewValue(e.format('MM dd, yyyy'));
    scope.$apply();
    scope.row.dueDate = e.format('MM dd, yyyy'); //<--- new line
});

dp.on（'changeDate'，函数（e）{
ngModelCtrl.$setViewValue（即格式（'MM-dd，yyyy'）；
作用域：$apply（）；
scope.row.dueDate=e.format（'MM dd，yyyy'）；//1>确保安装两个库
-角可调
-角度引导数据选择器

2> 创建新指令

/*我为xeditable制定的新指令可用于
引导数据采集器
*/

angular.module（'xeditable'）。指令（'editableBootstrapDatepicker'，['editableDirectiveFactory'，函数（editableDirectiveFactory）{
返回editableDirectiveFactory({
directiveName:“editableBsdateNew”，
inputpl:'
});   } ]);

3> 在HTML中，输入如下内容：

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

日期。。。
不幸的是，我知道我在plunker中的东西非常接近。我已经有一段时间没有好好看它了，但是如果你点击文本框打开日历，使用箭头键导航并输入选择日期，你可以正确更改模型。因此，使用鼠标选择日期是错误的ect一个日期。我将在本周晚些时候再看一看。你是对的，有一点改动可能会有所帮助。我想我已经让它工作了，而不是使用渲染方法使用链接方法和绑定属性那样。
angular.module('xeditable').directive('editableBootstrapDatepicker', ['editableDirectiveFactory',   function(editableDirectiveFactory) {
     return editableDirectiveFactory({
       directiveName: 'editableBsdateNew',
       inputTpl: '<span ng-datepicker ng-options="datepickerOptions"></span>'
     });   } ]);

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