Angular UI Datepicker interfejsu użytkownika, wywołanie zwrotne, gdy zmiany widoku

Question

Używam Bootstrap Angular UI, zarówno najnowsze wersje.

Chciałbym mieć wywołanie zwrotne, gdy mój widok ulegnie zmianie, tj. Gdy przejdę z maja na czerwiec. Potrzebuję tego ze względu na następujący scenariusz:

Mój datepicker pokazuje dostępne i niedostępne daty z funkcją customClass. Dostaję wszystkie dostępne dane z bieżącego miesiąca, ale kiedy kliknę obok lub poprzednio, nie mam żadnego połączenia zwrotnego, aby pobrać nowe dostępność.

Ponadto, nie chcę wywołania asynchronicznego 42 razy (po jednym dla każdej klasy), ponieważ w de datepicker otrzymasz również wiele problemów związanych z synchronizacją. Mam nadzieję, że ktoś zna sposób, aby to osiągnąć, bardzo długo szukałem rozwiązania.

Moje HTML:

<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> 

W $ scope.dpOptions (Opcje DatePicker) Mam zdefiniowane co Własne klasy muszą być:

$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

Kolega znalazł rozwiązanie korzystając kątowe $ provide.decorator function! Spowoduje to dodanie dodatkowych funkcji do każdej istniejącej dyrektywy.

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

Aby wywołać funkcję teraz mogę dodać do dowolnego sterownika z 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. 

     });