açısal malzeme md-datepicker, bir iyonik modelde çalışmıyor

Question

Bir iyonik modelde bir açısal malzeme md-datepicker kullanmaya çalışıyorum ve tarih seçicisi kullanıldığında ve tarih değiştirilirken ng-change olayı tetiklenmiyor; datepicker kendisi kaydırmaz ve tıklanabilir görünmez. Modalın dışında datepicker kullanmayı denediğimde, hepsi doğru çalışıyor. Burada neler oluyor?

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

açısal malzeme yerine iyonik modal daha vücut belge takvim paneli ekler olmasıdır: burada

ve

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

denetleyicisidir. İyonik modda olduğunuzda takvimi göremezsiniz ve takvim modalın dışındadır. Çözüm angular-material.js'yi kesmek.

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

Sonra (min değil) açısal-material.js gidin gerekir:

İlk gibi iyonik modal bir div olun. Ara:

document.body.appendChild(calendarPane); 

Ve gibi kendi alanı ile değiştirin:

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

Sen modal takviminizi göreceksiniz. Hala biraz garip olacak, ama çalışıyor. İyi görünmesini sağlamak için iyonik css ile savaşmanız gerekir. o modal göre daha düşük olma datepicker z-index ile ilgili bir sorun

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