在ngModal中使用angular-ui的日期选择器弹出窗口不显示

我正在将angular-ui的datepicker-popup与ngModal（https://github.com/adamalbrecht/ngModal）集成，但我有问题，datepicker弹出窗口只显示一次，从第二次它不再显示。在ngModal中使用angular-ui的日期选择器弹出窗口不显示

编辑：看来，我点击日期选择后，$scope.opened没有更新为false，所以从第二次它不显示。如果我删除模式对话框只使用日期选择器，然后$scope.opened正确地更新为选择日期后为假。

下面的代码：

HTML

<!DOCTYPE html> 
<html> 

<head> 
    <title>AngularJS Test</title> 
    <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.css" /> 
    <link rel="stylesheet" type="text/css" href="bower_components/ngModal/dist/ng-modal.css"/> 
</head> 

<body ng-app="app"> 
    <div ng-controller="TestCtrl"> 
     <button type="button" class="btn btn-primary" ng-click="showMe()">Show Me</button> 
     <modal-dialog show='modalShown' width="60%" height="500px" dialog-title='My Dialog'> 
      <p class="input-group"> 
       <input type="text" class="form-control" datepicker-popup ng-model="dt" is-open="opened" close-text="Close" /> 
       <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> 
     </modal-dialog> 
    </div> 


    <script src="bower_components/angular/angular.js"></script> 
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 
    <script src="bower_components/ngModal/dist/ng-modal.js"></script> 
    <script src="js/script.js"></script> 
</body> 

</html>

var app = angular.module("app", ['ui.bootstrap', 'ngModal']); 
app.controller('TestCtrl', ['$scope', function($scope) { 
    $scope.modalShown = false; 
    $scope.showMe = function() { 
     $scope.modalShown = true; 
    } 
    $scope.open = function($event) { 
     $event.preventDefault(); 
     $event.stopPropagation(); 

     $scope.opened = true; 
    }; 
}]);

来源

2014-09-28 Yaiba

-1

我得到了这个问题的解决方案。

由于$scope.opened未在模态对话框中设置为false，我们可以使用$timeout函数手动设置此值。

$scope.open = function($event) { 
 
     
 
     $scope.opened = true; 
 
     
 
     setTimeout(function() { 
 
      $scope.opened = false; 
 
     }, 10);    
 
    };

<input is-open="opened" 
 
     type="text" class="form-control" datepicker-popup="{{format}}" 
 
     ng-model="dt" />

来源

2014-11-18 16:36:44

（第一个答案评论）尽量避免在问答案的问题。 – eckes 2014-11-18 16:54:43

在ngModal中使用angular-ui的日期选择器弹出窗口不显示

回答

相关问题