如何使用 Angular js 刷新内联 JQuery ui datepicker？答案

【问题标题】：How to refresh inline JQuery ui datepicker using angular js?如何使用 Angular js 刷新内联 JQuery ui datepicker？
【发布时间】：2016-04-07 09:03:53
【问题描述】：

我为datpicker创建了一个指令，如下：

angular.module('myApp').directive('datepicker', ['myService', '$q', function (myService, $q){
    return{
         restrict: 'A',
         require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl){
              var selectedDropDownVal = attrs.selectedValue;
              var events = null;
              var eventPromise = myService.getCalendarEvents(selectedDropDownValue);
              return eventPromise.the(function(result){
                    *some logic*
                    return events;
              });

              return $q.all([eventsPromise]).then(function(){
                     return element.datepicker({
                           minDate:today,
                           dateFormat: "dd/mm/yy",
                           beforeShowDay: function (date){
                                *some logic to highlight dates*
                           },
                           onSelect: function (date){
                                scope.$apply(function(){
                                     ngModelCtrl.$setViewValue(date);
                                });
                           }
                     });
              }

         }
    };
});

这如我所愿。

所以我遇到的问题是，当下拉列表项发生更改时，我想刷新此日期选择器，以便它现在使用新的下拉值返回服务器并返回突出显示的事件。

到目前为止我尝试了什么？
我创建了一个 ng-change="UpdateDatepickerSelectedValue()" 如下：

$scope.UpdateDatepickerSelectedValue = function () {
        console.log("value has changed!");

        console.log("attempting to refresh datepicker!");

        var eventDatepicker = angular.element(document).find('#eventCalendar');
        console.log(eventDatepicker);
        eventDatepicker.datepicker('refresh');
    };

但是这不会刷新日期选择器！

有人可以建议吗？这也是正确的方法吗？有其他选择吗？

谢谢。

库什

【问题讨论】：

标签： jquery angularjs jquery-ui datepicker jquery-ui-datepicker

【解决方案1】：

我已找到解决此问题的方法：

问题在于，当下拉值更改时，我需要日期选择器更新新突出显示的日期。

我实现这一点的方法是在元素属性上引入一个 $watch。

所以我的代码现在看起来像：

angular.module('myApp').directive('datepicker', ['myService', '$q', function (myService, $q){
    return{
         restrict: 'A',
         require: 'ngModel',
         scope: {
              selectedValue: '@'
         }
         link: function (scope, element, attrs, ngModelCtrl){

              var events = null;

              var getEvents = function(value){
                  var eventPromise = myService.getCalendarEvents(value);
                  return eventPromise.then(function(result){
                        *some logic*
                        return events;
                  });
              }

              scope.$watch('selectedValue', function(value){

                 var response = getEvents(value);

                 return $q.all([eventsPromise]).then(function(){
                     return element.datepicker({
                           minDate:today,
                           dateFormat: "dd/mm/yy",
                           beforeShowDay: function (date){
                                *some logic to highlight dates*
                           },
                           onSelect: function (date){
                                scope.$apply(function(){
                                     ngModelCtrl.$setViewValue(date);
                                });
                           }
                     });
                });
              }

         }
    };
});

希望这对其他人也有帮助！ :)

【讨论】：