JQueryのdatepickerを使用するとng-modelは値を更新しません

Question

したがって、ユーザーに2つのテキストボックスを選択して、JqQueryのdatepicker UIを使用して、テキストボックスをクリックすると小さなカレンダーのポップアップを表示します。今問題は、テキストボックスをクリックするとカレンダーがポップアップし、日付を選択してからテキストボックスがその日付で満たされ、javascriptのスコープ変数も更新されるということです。しかし、私のHTMLでは、「To」日付ボックスをクリックするまで、「From」日付ボックスの値は印刷されません。以下は私のコードです：

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ボックスをクリックして日付を選択します。それから私は、$scope.data.dateFromChosen = 06/01/2016を意味するYou chose 06/01/2016というポップアップを得る。しかし、私のHTMLには表示されません。次に、to dateボックスをクリックすると、dateFromChosenの値がHTMLに出力されます。なぜこれが起こり、どのように修正するのか誰にも分かりますか？ありがとう

Answer 1

$ scope（$ apply（）を追加して、角度をダイジェストサイクルに再実行させるようにしてください。

$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); 
    } 
});