datepicker - 角度 Material md-datepicker 无法在 ionic 模式下工作

Question

我正在尝试在 ionic 模态中使用角度 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>

这是 Controller :

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

这是因为角度 Material 会将日历面板附加到文档正文而不是 ionic 模态。当您处于 ionic 模式并且日历位于模式之外时，您看不到它。解决方案是破解 angular-material.js。

首先在你的 ionic 模式中创建一个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;
}