Angular-Kendo e $ scope. $ Apply()

Question

Si prega di considerare la vista parziale sotto e il controller sotto. Nell'evento ng-change sugli elementi del selettore di date le funzioni chiamate cambiano il valore che definisce i limiti superiore o inferiore dell'altro.

So che ho bisogno di ridisegnare il DatePicker di Kendo per farlo vedere il valore aggiornato e che dovrei farlo in una direttiva, ma la mia esperienza limitata mi lascia bloccato. Ho ipotizzato $ scope. $ Apply() chiamato dopo che l'aggiornamento per l'ambito lo avrebbe fatto ma non ha funzionato.

Come devo fare questo in modo angolare?

// Home View 
<button id="date-button" type="button" kendo-button ng-click="showModal();"> 
    Variance Analysis 
    <br /> 
</button> 
<div id="spinner" class="loading" style="display:none;"> 
    <div class="loading-dot"></div> 
    <div class="loading-dot"></div> 
    <div class="loading-dot"></div> 
    <div class="loading-dot"></div> 
</div> 

<div class="row"> 
    <br /> 
    <br /> 
    <br /> 
    <div class="col-lg-6 col-lg-offset-3"> 
     <h1>Select Two Months to Compare</h1> 
     <br /> 
     <br /> 
     <br /> 
     <div class="col-lg-6"> 
      <input kendo-date-picker ng-model="dates.fromDate" k-ng-model="dates.actualFromDate" k-options="datePicker1Options();" ng-change="setMaxDate();" /> 
     </div> 
     <div class="col-lg-6"> 
      <input kendo-date-picker ng-model="dates.untilDate" k-ng-model="dates.actualUntilDate" k-options="datePicker2Options();" ng-change="setMinDate();" /> 
     </div> 
     <div class="row"> 
      <br /> 
      <br /> 
      <br /> 
      <div class="col-lg-2 col-lg-offset-4"> 
       <button kendo-button ng-click="go();" style="width:100%;">Go</button> 
      </div> 
     </div> 
    </div> 
</div> 




// Home Controller 
app.controller('HomeCtrl', ['$scope', '$http', '$location', 'data', function ($scope, $http, $location, data) { 
    $scope.dates = {}; 
    $scope.dates.untilDate; 
    $scope.dates.fromDate; 
    $scope.dates.actualUntilDate; 
    $scope.dates.actualFromDate; 

    $scope.minDate = new kendo.data.ObservableObject({ 
     date: new Date(1970) 
    }); 

    $scope.maxDate = new kendo.data.ObservableObject({ 
     date: new Date() 
    }); 

    $scope.setMaxDate = function() { 
     var date = new Date($scope.dates.actualFromDate); 
     date.setMonth(date.getMonth() + 1); 
     $scope.maxDate.date = date; 
     // $scope.$apply(); 
    } 

    $scope.setMinDate = function() { 
     var date = new Date($scope.dates.actualUntilDate); 
     date.setMonth(date.getMonth() - 1); 
     $scope.minDate.date = date; 
     // $scope.$apply(); 
    } 


    $scope.datePicker1Options = function() { 
     return { 
      animation: { 
       close: { 
        effects: "fadeOut zoom:out", 
        duration: 300 
       }, 
       open: { 
        effects: "fadeIn zoom:in", 
        duration: 300 
       } 
      }, 
      format: "MMM yyyy", 
      start: "year", 
      depth: "year", 
      min: $scope.minDate.date 
     } 
    } 


    $scope.datePicker2Options = function() { 
     return { 
      animation: { 
       close: { 
        effects: "fadeOut zoom:out", 
        duration: 300 
       }, 
       open: { 
        effects: "fadeIn zoom:in", 
        duration: 300 
       } 
      }, 
      format: "MMM yyyy", 
      start: "year", 
      depth: "year", 
      max: $scope.maxDate.date 
     } 
    } 

    $scope.go = function() { 
     data.fetch($scope.dates.fromDate, $scope.dates.untilDate, $http, $location); 
    } 


}]); 

Answer 1

Guardando il codice sorgente, k-rebind è quello che stai dopo dal momento angolare kendo non usa associazioni bidirezionali, ma k-rebind sembra buggy ultra e mantenuto l'invio di eventuali prove che ho fatto in un ciclo infinito digerire . Meglio prenderlo con l'autore.

Inoltre, penso che ci sia un bug logico nei confronti dei due selezionatori di date. Sto assumendo il FromDate dovrebbe in realtà impostare il MinDate che aggiornerà la possibilità di minDatePicker2

Answer 2

Sto avendo problemi simili cercando di aggiornare una griglia di Kendo utilizzando $ portata. Applicare $() o l'attributo k-Rebind nel html. Il primo sta restituendo l'errore "Digest già in corso", e quest'ultimo sta in qualche modo uccidendo Chrome con qualche tipo di problema di memoria.