angularjs如何刷新使用角 js 的内联 JQuery ui datepicker?

发布时间: 2017/4/16 3:51:26
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我已经创建了一个指令,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');
    };

然而这并不刷新页面之上 !

有人请告知可以吗?这也是正确的做法吗?还有别的吗?

感谢.

兴都库什

解决方法 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);
                                });
                           }
                     });
                });
              }

         }
    };
});

希望这有助于他人太 !:)

赞助商