угловой материал md-datepicker не работает в ионном модальном

Question

Я пытаюсь использовать угловой материал md-datepicker в ионном модальном режиме, и у меня нет события ng-change, которое срабатывает, когда используется datepicker, и дата изменяется, сам datepicker не будет прокручиваться и не выглядит кликабельным. Когда я попытался использовать datepicker вне модального, все работает правильно. Что здесь происходит?

<script id="add-location-modal.html" type="text/ng-template"> 
    <ion-modal-view> 
<ion-content> 
    <md-content layout-padding> 
    <form name="myForm" style=""> 
     <md-datepicker ng-model="date" ng-change="updateDate(date)" md-placeholder="Date"></md-datepicker> 
    </form> 
    </md-content> 
</ion-content> 

А вот контроллер:

angular.module('myModule') 
    .controller('TripDetailsCtrl'['$scope','$rootScope','$stateParams','tripServices','tripLocationServices','$ionicModal', 
    function($scope,$rootScope,$stateParams,tripServices,tripLocationServices,$ionicModal){ 

$scope.trip = [],$scope.tripData = {}, $scope.addLocationModal, $scope.locationData = {},$scope.date; 

$scope.showAddLocationModal = function(){ 
    $scope.addLocationModal.show(); 
}; 

$scope.closeAddLocationModal = function(){ 
    $scope.addLocationModal.hide(); 
}; 

var initModal = function(){ 
    if(!$scope.addLocationModal){ 
    $ionicModal.fromTemplateUrl('add-location-modal.html', { 
     scope: $scope, 
     animation: 'slide-in-up' 
    }).then(function(modal) { 
     $scope.addLocationModal = modal; 
    }); 
    } 
}; 


    initModal(); 

Answer 1

Это происходит потому, что угловой материал будет добавлять календарную панель к документу тела, а не ионные модальной. Вы не можете видеть это, когда находитесь в ионном модальном режиме, а календарь находится вне модальности. Решение состоит в том, чтобы взломать угловой материал.

Сначала сделайте DIV в вашей ионной модальных как:

<ion-modal-view class="datepickerModal"> 
     <ion-header-bar> 
     <h1 class="title">Select a date to view history</h1> 
     <div class="buttons"> 
      <button class="button button-calm" ng-click="closeDatepickerModal()">Close</button> 
     </div> 
     </ion-header-bar> 
     <ion-content> 
     <md-content> 
      <h4>Date-picker with min date and max date</h4> 
      <md-datepicker ng-model="myDate" md-placeholder="Enter date" md-min-date="minDate" md-max-date="maxDate"></md-datepicker> 

      <!-- give the div an ID--> 
      <div id="ionicCalendar"></div> 
      <!--End --> 

     </md-content> 
     </ion-content> 
    </ion-modal-view> 

Затем нужно перейти к угловым-material.js (не мин). Поиск:

document.body.appendChild(calendarPane); 

И заменить его на вашу собственную области, как:

document.getElementById('ionicCalendar').appendChild(calendarPane); 

Вы увидите календарь в модальном. Это все равно будет немного странно, но он работает. Вам нужно сражаться с ионным css, чтобы он выглядел прилично. Кроме того, чтобы убедиться, что ваши JS и CSS версия матча

CSS, как:

.datepickerModal md-content{ 
    height:100%; 
} 
.datepickerModal .bar{ 
    background-color:#11c1f3; 
} 
.datepickerModal .bar h1.title{ 
    font-size:14px !important; 
}