Giao diện người dùng góc khởi động Bootstrap, gọi lại khi xem thay đổi

Question

Tôi sử dụng Angular UI Bootstrap, cả hai phiên bản mới nhất.

Tôi rất muốn có một cuộc gọi lại khi chế độ xem của tôi thay đổi, vì vậy tức là khi tôi chuyển từ tháng 5 đến tháng 6. Tôi cần điều này vì kịch bản sau:

Trình hiển thị ngày của tôi hiển thị ngày có sẵn và không có sẵn với chức năng customClass. Tôi tìm nạp tất cả tính khả dụng của tháng hiện tại, nhưng khi tôi nhấp vào tiếp theo hoặc trước đó, tôi không có bất kỳ cuộc gọi lại nào để tìm nạp các tính khả dụng mới.

Ngoài ra, tôi không muốn một cuộc gọi không đồng bộ 42 lần (một cho mỗi lớp) vì bạn cũng sẽ nhận được rất nhiều vấn đề về thời gian trong de datepicker. Tôi hy vọng ai đó biết cách để đạt được điều này, tôi đã tìm kiếm rất lâu để có giải pháp ngay bây giờ.

HTML của tôi:

<div class="input-group"> 
     <span class="input-group-addon" ng-click="vm.OpenDatepicker($event,'1')"><i class="ti-calendar"></i></span> 
     <input type="text" class="form-control" datepicker-options="dpOptions" readonly style="cursor:pointer; background-color:white;" 
      uib-datepicker-popup="dd-MMMM-yyyy" min-date="minDate" show-weeks="true" ng-model="selectedDate" 
      is-open="vm.$scope.datepickers[1]" show-button-bar="false" ng-click="vm.OpenDatepicker($event,'1')" /> 
</div> 

Trong $ scope.dpOptions (DatePicker Options) Tôi đã xác định những gì các lớp tùy chỉnh cần phải:

$scope.dpOptions.customClass= function (data) { 
//Here are my availabilities of the first month fetched 
//When I change the month in my view, I first want to have the other availabilities 
//so I can return the new red/green classes 
}; 

Answer 1

Đồng nghiệp của tôi tìm thấy một giải pháp sử dụng một góc Hàm $ offer.decorator! Điều này sẽ thêm một số tính năng bổ sung cho bất kỳ chỉ thị hiện có nào.

$provide.decorator('uibDatepickerDirective', function ($delegate) { 
     var directive = $delegate[0]; 
     var directiveCompile = directive.compile; 

     directive.compile = function() { 
      var link = directiveCompile.apply(this, arguments); 

      return function (scope) { 
       link.apply(this, arguments); 

       var oldMove = scope.move; 
       scope.move = function (direction) { 
        oldMove.apply(this, arguments); 
        scope.$emit('datepicker.monthChanged', this.rows); 
       } 
      } 
     }; 
     return $delegate; 
    }); 

Để gọi một hàm bây giờ tôi có thể thêm video này vào bất kỳ bộ điều khiển với một datepicker:

$scope.$on('datepicker.monthChanged', function (event, rows) { 

      let startDate = rows[0][0].date; 
      let endDate = rows[5][6].date; 
      //Do anything you want! 
      //To add customClass, every column has a customClass attribute you can set. 

     });