角材料md-datepicker无法在离子模态下工作 [英] angular material md-datepicker not working in an ionic modal

问题描述

我正在尝试在离子模态中使用角材料md-datepicker，并且在使用datepicker和更改日期时没有触发ng-change事件，datepicker本身不会滚动，并且不会'似乎可点击.当我尝试在模式之外使用datepicker时，所有功能都可以正常工作.这是怎么回事?

I am attempting to use an angular material md-datepicker within an ionic modal and am not having the ng-change event being fired when the datepicker is used and date is changed,the datepicker itself won't scroll, and doesn't seem clickable. When I have tried using the datepicker outside of the modal, all works correctly. What is going on here?

<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();

推荐答案

这是因为角形材料会将日历面板附加到文档主体，而不是离子模态.当您处于离子模态且日历不在模态下时，您将看不到它.解决方案是破解angular-material.js.

This is because the angular material will append the calendar panel to document body rather than ionic modal. You can't see it when you are in ionic modal and the calendar is outside the modal. The solution is to hack the angular-material.js.

首先在离子模态中创建一个div，例如:

First make a div in your ionic modal like:

    <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(不是分钟).搜索:

Then you need go to angular-material.js (not min). Search for:

 document.body.appendChild(calendarPane);

并将其替换为您自己的区域，例如:

And replace it with your own area like:

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

您将在模式中看到您的日历.仍然有些怪异，但它正在起作用.您需要与离子CSS战斗才能使其看起来像样.还要确保您的js和CSS版本匹配

You will see your calendar in the modal. It will still be a little weird, but it's working. You need to fight with ionic css to make it look decent. Also to make sure your js and css version match

CSS之类的

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

这篇关于角材料md-datepicker无法在离子模态下工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！