각진 재질 DatePicker 및 NG-CHANGE

Question

사용자가 md-datepicker 구성 요소에서 날짜를 선택하면 서버를 호출하여 선택한 날짜의 일정을 확인해야합니다. 문제는 ng-change를 사용하여 내 기능을 실행할 수 없다는 점입니다.이 작업을 수행하는 유일한 방법 인 것 같습니다. 왜 이것이 작동하지 않는지에 대한 생각은 없습니까? 것 같다

form.html

<div 
    layout-padding> 
    <form 
     name="form" 
     novalidate 
     ng-submit="form.$valid && save()"> 
     <div 
      layout> 
     <md-input-container 
      class="md-block" 
      flex="100"> 
      <label>Nome Completo</label> 
      <input 
       name="fullName" 
       ng-model="costumer.fullName" 
       required 
       disabled/> 
      <div 
       ng-messages="form.fullName.$error"> 
       <div ng-message="required">O cliente não foi específicado</div> 
       </div> 
     </md-input-container> 
     </div> 
     <div 
      layout> 
     <md-input-container 
      flex> 

      <label>Data</label> 
      <md-datepicker 
       name="date" 
       ng-model="appointment.when" 
       md-open-on-focus 
       md-min-date="today"> 

      </md-datepicker> 

      <div 
       ng-messages="form.date.$error"> 
      <div ng-message="valid">Data inválida</div> 
      <div ng-message="mindate">Data anterior à atual</div> 
      </div> 
     </md-input-container> 

     <md-input-container 
      flex="50"> 
      <label>Horário</label> 
      <md-select 
       name="whatTime" 
       ng-model="appointment.whatTime" 
       required> 
       <md-option value="0">08:00 - 09:00</md-option> 
       <md-option value="1">09:00 - 10:00</md-option> 
       <md-option value="2">10:00 - 11:00</md-option> 
       <md-option value="3">13:00 - 14:00</md-option> 
       <md-option value="4">14:00 - 15:00</md-option> 
       <md-option value="5">15:00 - 16:00</md-option> 
       <md-option value="6">16:00 - 17:00</md-option> 
       <md-option value="7">17:00 - 18:00</md-option> 
      </md-select> 

      <div 
       ng-messages="form.whatTime.$error"> 
       <div 
        ng-message="required">Selecione um horário</div> 
      </div> 
     </md-input-container> 
     </div> 
     <md-button 
      type="submit">Confirmar</md-button> 
    </form> 
</div> 

controller.js

angular.module('Application').controller('NewAppointmentController', 
    ['$scope', '$routeParams', 'CostumerService', 'AppointmentService', 
     function($scope, $routeParams, CostumerService, AppointmentService) { 
      console.log('NewAppointmentController init'); 

      console.log('Costumer: ' + $routeParams.costumerId); 

      $scope.today = new Date(); 
      $scope.appointment = {}; 
      $scope.appointment.when = $scope.today; 

      $scope.save = save; 
      $scope.checkSchedule = checkSchedule; 

      CostumerService.getUniqueById($routeParams.costumerId) 
        .then(function(data){ 
         $scope.costumer = data; 
         console.log('Costumer name: ' + data.fullName); 
        }, function(error){ 
         console.log('Erro'); 
        }); 

      function save() { 
       console.log('Clicked'); 

       $scope.appointment.costumer = $scope.costumer; 

       AppointmentService.save($scope.appointment) 
         .then(function(data) { 
          console.log('Saved'); 
         }, function(error){ 
          console.log('Error'); 
         }); 
      } 

      function checkSchedule() { 
       console.log('Changed: '); 
      } 

    }]); 

Answer 1

나를 위해 작동합니다. 이 CodePen, ngChange with Datepicker을 참조하십시오. 추가 함

<md-datepicker 
    name="date" 
    ng-model="appointment.when" 
    ng-change="checkSchedule()" 
    md-open-on-focus 
    md-min-date="today"> 
</md-datepicker> 

언제든지 날짜를 변경하면 콘솔에 기록됩니다. 하지만 실제로는 Custom Validation에 설명 된대로 $asyncValidators을 사용해야하는 것처럼 보입니다.