angular material md-datepicker 无法在离子模态中工作

Question

我正在尝试在离子模式中使用 angular material md-datepicker，并且在使用日期选择器和更改日期时没有触发 ng-change 事件，日期选择器本身不会滚动，似乎不可点击。当我尝试在模式之外使用日期选择器时，一切正常。这是怎么回事？

<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

这是因为 angular material 会将日历面板附加到文档主体而不是离子模式。当您处于离子模态并且日历在模态之外时，您看不到它。解决方案是破解 angular-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>

然后您需要转到 angular-material.js（不是分钟）。搜索：

 document.body.appendChild(calendarPane);

并替换成你自己的区域，如：

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

您将在模式中看到您的日历。它仍然会有点奇怪，但它正在工作。您需要与 ionic css 战斗才能使其看起来像样。还要确保您的 js 和 css 版本匹配

CSS 赞：

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

angular material md-datepicker 无法在离子模态中工作

angular material md-datepicker not working in an ionic modal

modal-dialog

datepicker

ionic-framework

angular-material