使用 JQuery datepicker 时 ng-model 不更新值

Question

所以我有两个文本框供用户选择日期，并且我使用 JqQuery 的 datepicker UI 在单击文本框时显示一个小的日历弹出窗口。现在的问题是，当我单击文本框时，会弹出日历，我选择一个日期，然后文本框会填充该日期，并且我在 javascript 中的范围变量也会更新。但是，在我的 HTML 中，只有单击“至”日期框，才会打印“从”日期框的值。以下是我的代码：

home.html

<form name="myForm">
From Date:
<input type="text" id="dateFrom" ng-model="data.dateFromChosen" />
To Date:
<input type="text" id="dateTo" ng-model="data.dateToChosen" />
</form>

<p>You chose: {{ data.dateFromChosen }} and {{ data.dateToChosen }}</p>

script.js

$scope.data = {};
$("#dateFrom").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateFromChosen = $("#dateFrom").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
        alert("You chose " + $scope.data.dateFromChosen);
    }
});
$("#dateTo").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateToChosen = $("#dateTo").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
        alert("You chose " + $scope.data.dateToChosen);
    }
});

这就是发生的事情：我点击from date 框并选择一个日期。然后我得到弹出窗口说You chose 06/01/2016，这意味着$scope.data.dateFromChosen = 06/01/2016。但它不会显示在我的 HTML 中。然后，当我单击 to date 框时，dateFromChosen 的值会打印在 HTML 上。有谁知道为什么会发生这种情况以及如何解决它？谢谢

Answer 1

尝试添加 $scope.$apply() 以强制 Angular 重新运行摘要循环。

$scope.data = {};
$("#dateFrom").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateFromChosen = $("#dateFrom").datepicker({dateFormat:     'mm/dd/yyyy'}).val();
        $scope.$apply();
        alert("You chose " + $scope.data.dateFromChosen);
    }
});
$("#dateTo").datepicker({
    onSelect: function(dateText) {
        $scope.data.dateToChosen = $("#dateTo").datepicker({dateFormat: 'mm/dd/yyyy'}).val();
        $scope.$apply();
        alert("You chose " + $scope.data.dateToChosen);
    }
});