角度材料md-datepickerがイオンモーダルで動作しない

Question

イオンモダリティ内で角度材料md-datepickerを使用しようとしていて、datepickerが使用されて日付が変更されたときにng-changeイベントが発生しないと、 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

角度材料ではなく、イオンモーダルよりも、体を文書化するために、カレンダーパネルを追加しますので、これはです。あなたがイオンモーダルで、カレンダーがモーダルの外にあるときは、あなたはそれを見ることができません。解決方法は、angle-material.jsをハックすることです。

まず、あなたのようなイオン性のモーダルでの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> 

次に、あなたは（MINない）アンギュラmaterial.jsに行く必要があります。検索：

document.body.appendChild(calendarPane); 

など、独自の地域でそれを置き換える：

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

あなたはモーダルでカレンダーが表示されます。まだ少し変わっていますが、うまくいきます。あなたはそれがまともに見えるようにイオンcssと戦う必要があります。それはモーダルよりも低いという日付ピッカーのzインデックスの問題

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