Question

我的模态中的表单中有一个日期选择器。无论我尝试什么，都不会打开日期选择器。我的代码是：

   //In my parent controller - Called on button click
    $scope.openModal = function(indx){
        var modalInstance = $modal.open({
            animation:true,
            templateUrl:'myModal.html',
            controller: 'MyModalController'
        });

    };

  //In MyModalController
  $scope.open = function(){
          $scope.opened = true;
          console.log('Opened  is  : ' + $scope.opened);
      };

 //Modal view file myModal.html
 <input type="text" class="form-control" datepicker-popup="dd.MMMM.yyyy" ng-model="obj.startDate" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" close-text="Close" />
     <span class="input-group-btn">
     <button type="button" class="btn btn-default" ng-click="open(evt)">Close</button>
     </span>

此问题之前已被问过，但所给出的解决方案对我不起作用。我已经尝试过这里建议的所有内容：

ui.bootstrap.datepicker is-open not working in modal

https://github.com/angular-ui/bootstrap/issues/2307

Answer 1

将$event.preventDefault()和$event.stopPropagation()添加到控制器中的open函数中，并确保在ng-click中将$event传递给open函数：

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

并在您看来：

<button type="button" class="btn btn-default" ng-click="open($event)">Close</button>

运行代码段以查看有效的演示：

var app = angular.module('demo', ['ui.bootstrap', 'ngAnimate']);

app.controller('MainCtrl', ['$scope', '$modal', function($scope, $modal){

  $scope.open = function () {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl'
    });
  
  };
  
}]);

app.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function ($scope, $modalInstance) {
  
  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
}]);

@import url("//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css");

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.js"></script>

<div ng-app="demo">
  <div ng-controller="MainCtrl" class="container">
    <button class="btn btn-default" ng-click="open()">Open Modal</button>
  </div>
  
  
  <script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
      <h3 class="modal-title">Modal with a DatePicker</h3>
    </div>
    <div class="modal-body">
       <div class="col-md-6">
            <p class="input-group">
              <input type="text" class="form-control" datepicker-popup="shortDate" ng-model="dt" is-open="opened"  />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>   
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
    </div>
  </script>
  
  
</div>

Angular ui模式中的Datepicker无法打开

1 个答案: