如何使用 angular js 刷新内联 JQuery ui 日期选择器？

Question

我为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);
                                });
                           }
                     });
              }

         }
    };
});

这正如我所愿。

所以我遇到的问题是，当下拉列表项发生变化时，我想刷新这个日期选择器，这样它现在就会返回到带有新下拉值和 return 突出显示事件的服务器。

到目前为止我尝试了什么？
我创建了一个 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');
    };

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

有人可以指点一下吗？这也是一种正确的方法吗？还有其他选择吗？

谢谢。

库什

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

         }
    };
});

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

如何使用 angular js 刷新内联 JQuery ui 日期选择器？

How to refresh inline JQuery ui datepicker using angular js?

jquery

angularjs

jquery-ui

datepicker

jquery-ui-datepicker