在 angularJS 中，为什么我的模型在将输入链接到日期选择器时没有更新？答案

【问题标题】：In angularJS, why is my model not updating when linking the input to a datepicker?在 angularJS 中，为什么我的模型在将输入链接到日期选择器时没有更新？
【发布时间】：2014-02-23 16:09:11
【问题描述】：

我有点迷路了。我定义了一个创建日期选择器的角度指令（eternicode(https://github.com/eternicode/bootstrap-datepicker/) 的引导日期选择器）：

日期选择器似乎可以直观地工作。它会弹出，并在我的文本框中输入一个值。但是除非我手动编辑文本框，否则角度模型不会更新。

我的指令：

myApp.directive('ccDatePicker', function ($compile) {
    return {
        restrict: 'EA',
        template: '<input type="text" ng-model="ngModel" />',
        require: '^ngModel',
        scope: {
            ngModel: '='
        },
        replace: false  ,
        link: function (scope, element, attrs) {
            element.children(0)
                .on('change', function () { scope.$digest(); })
                .datepicker({ format: 'yyyy/mm/dd', autoclose: true });
        }
    };
});

我的 HTML：

<label>Due date: <cc-date-picker ng-model="todoObject.dueBy" /></label>

<div>
    dueBy: {{todoObject.dueBy}} (updates when editing textbox by hand, but not when using date picker)
</div>

我使用了 scope.$digest 来刷新模型，我也尝试了 scope.$apply。没有运气。

当用户在日期选择器中选择日期时，如何更新我的角度模型？

【问题讨论】：

标签： angularjs datepicker

【解决方案1】：

在尝试基于 jQuery 插件创建 datepicker 指令时，我遇到了类似的问题，因为 datepikcer 的 onSelect() 事件发生在 angular 世界之外并且没有引发通知，您需要调用 $scope.$apply() 强制摘要让 Angular 知道它应该更新模型值：

onSelect: function (date) {
   scope.$apply(function () {
      ngModelCtrl.$setViewValue(date);
   });
}

同样在您发布的 sn-p 中，我看不到您在哪里设置模型值，因此这一行：

ngModelCtrl.$setViewValue(date);

编辑

我制作了a plunk 来演示需要做什么。在不相关的说明中，您为什么不使用 angular-ui 日期选择器？

【讨论】：

关于角度日期选择器，除了无知之外没有其他原因:)

【解决方案2】：

如果您先设置到期日期（例如。

$scope.todoObject={dueBy:"04/27/2015"};

如何让下拉菜单在第一次显示时显示初始值？

http://plnkr.co/edit/xOzfQOOMe1GFoB1tfQiF?p=preview

【讨论】：