角度材料 md-datepicker 不在离子模态中工作

Question

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

<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.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 (不是 min)。搜索：

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