Interfaccia UI Bootstrap datepicker, callback quando cambia la vista

Question

Uso il Bootstrap con interfaccia utente angolare, entrambe le versioni più recenti.

Mi piacerebbe avere una richiamata quando la mia vista cambia, quindi quando passo da maggio a giugno. Ho bisogno di questo a causa del seguente scenario:

My datepicker mostra le date disponibili e non disponibili con la funzione customClass. Prendo tutte le disponibilità del mese corrente, ma quando faccio clic su Avanti o Precedente, non ho alcuna richiamata per recuperare le nuove disponibilità.

Inoltre, non desidero una chiamata asincrona 42 volte (una per ogni classe) perché si avranno anche molti problemi di temporizzazione in date scadute. Spero che qualcuno conosca un modo per raggiungere questo obiettivo, ho cercato a lungo una soluzione ora.

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

Negli $ scope.dpOptions (Opzioni DatePicker) ho definito quali sono le classi personalizzate devono essere:

$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

Il mio collega ha trovato una soluzione che utilizza un angolare $ provide.decorator function! Ciò aggiungerà alcune funzionalità aggiuntive a qualsiasi direttiva esistente.

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

per chiamare una funzione ora posso aggiungere questo a qualsiasi controller con un 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. 

     });