Datepicker в модальном интерфейсе Angular не открывается

У меня есть средство выбора даты в форме в моем модальном окне. Датапикер не открывается независимо от того, что я пытаюсь. Мой код:

   //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 не работает в модальном режиме

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


angularjs bootstrap-modal angular-ui-bootstrap bootstrap-datepicker
person KVNam    schedule 12.06.2015    source источник
comment
Почему вы используете is-open="$parent.opened", когда вас интересует область действия modal? Вы имели в виду is-open="opened" (имеется в виду область действия модального контроллера)? Родительский контроллер даже не имеет свойства с именем opened.   -  person ryanyuyu    schedule 12.06.2015
comment
Да, я сделал это $parent.opened в соответствии с решениями, представленными в другом вопросе, на который я ссылался. Первоначально он был просто открыт, и это тоже не работает :(   -  person KVNam    schedule 12.06.2015

Ответы (1)


arrow_upward
1
arrow_downward

Добавьте $event.preventDefault() и $event.stopPropagation() в вашу открытую функцию в вашем контроллере и обязательно передайте $event в открытую функцию в ng-click:

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

    $scope.opened = true;
  };

и на ваш взгляд:

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

Run the code snippet to see a working demo: 

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>

person jme11    schedule 12.06.2015
comment
Не работает! Ваш фрагмент кода работает отлично, и я изменил свой код, чтобы он идеально соответствовал ему, но средство выбора даты не открывается :( - person KVNam; 14.06.2015
comment
Плохо, я забыл удалить $parent из моей открытой переменной. Теперь он отлично работает, помечая его как ответ. Спасибо! - person KVNam; 14.06.2015