javascript - AngularJS版jquery datepicker有一小点问题

Question

https://github.com/angular-ui/ui-date
在项目中，我使用了适合angular的datepicker，现在有一个问题解决不了。

开始时间：
<input type="text" ui-date="startDateOptions" ui-date-format="@" id="start" class="textbox short" ng-model="startdate">
结束时间：
<input type="text" ui-date="endDateOptions" ui-date-format="@" id="end"  class="textbox short" ng-model="enddate">
<a class="button" ng-click="search()">搜索</a>

Angular:

....

.controller('someCtrl', function(...)){
   $scope.startDateOptions = {
            changeYear: true,
            changeMonth: true,
            onClose: function(selectedDate) {
               var end = $('#end');
               var d = $('#start').datepicker("getDate");
               end.datepicker("setDate", 
               new Date(d.getFullYear(),d.getMonth(),d.getDate() + 1));
               end.datepicker("option", "minDate", selectedDate);

               $scope.enddate = parseInt($scope.startdate) + 24*60*60*1000;
            }
        };
        $scope.endDateOptions = {
            changeYear: true,
            changeMonth: true,
            onClose: function(selectedDate) {
                var start = $("#start");
                if(start.val() == '') {
                   var d = $('#end').datepicker("getDate");
                   start.datepicker("setDate", 
                   new Date(d.getFullYear(),d.getMonth(),d.getDate() - 1));
                   $scope.startdate = parseInt($scope.enddate) - 24*60*60*1000;
                }
                start.datepicker("option","maxDate",selectedDate);  
            }
        };
}

现在就是点击第一个，然后第二个input会自动填上到第二天的时间，点击搜索完，第二个Input不会显示日期。因为第二个是setDate上去的。
如果是点击第一个input，再选择第二个input。它们都可以显示日期。
现在不知道怎么解决。

Answer 1

datepicker的onClose事件是纯粹的javascript事件，对angular来说是外部事件也就是说在onClose事件的处理函数中所做的任何状态更新(改变$scope或$scope的子对象的属性)都无法被angular记录下来。angular提供了$apply接口解决这个问题。因此
$scope.enddate = parseInt($scope.startdate) + 24*60*60*1000;
改为

scope.$apply(function() {
    $scope.enddate = parseInt($scope.startdate) + 24*60*60*1000;
});

for more details, plz goolge $scope angular apply

Answer 2

在AngularJS配合其他JS库使用时，最有可能出现问题的部分就是在使用第三方JS库的时候Angular并不知情。所以只要控制器中的某段代码没有使用Angular提供的函数或是服务，一定要在后面运行一遍

//代码
$scope.$apply();

当然更好的方法是将需要运行的代码放到$apply中的匿名函数中运行，像是这样：

$scope.$apply(function(){
    //代码
})

这样的话可以让Angular捕获到其中的错误。

Enjoy coding！