AngularJS日期选择器ui-日期错误更新

Question

双向数据绑定似乎会导致字段的错误更新。单击字段可以提高datepicker的显示效果，但如果您试图通过直接键入日期来编辑字段，则效果不是很好。

下面是演示这个问题的方法：http://jsfiddle.net/vSNJF/

<input type="text" ng-model="name" ui-date-format='m/d/yy' ui-date>

将Angular下的键盘编辑与此处的标准jquery UI日期选择器行为进行比较：http://jqueryui.com/datepicker/

如何使ui-date延迟更新模型，直到取消交互式日历？

Answer 1

你有一个相当大的指令，我不确定是否有人会仔细检查整个代码来找出导致问题的原因。为了帮助你，我将留下一个更简单的datepicker指令，它的行为与Jquery UI的行为完全一样，但是没有你已经实现的所有功能，如果你从这里开始添加功能，可能会更容易调试问题。

该指令是：

directive('datepicker', function() {
    return {
        restrict: 'A',
        require : 'ngModel',
        link : function (scope, element, attrs, ngModelCtrl) {
            $(function(){
               element.datepicker({
                    dateFormat:'dd/mm/yy',
                    onSelect:function (date) {
                        ngModelCtrl.$setViewValue(date);
                        scope.$apply();
                    }
                });
            });
        }
    }
}); 

这里有一个Plunker和一个关于它的blog post。