Question

我将{-1}} angular-ui与ngModal（https://github.com/adamalbrecht/ngModal）结合在一起但是我有一个问题，即datepicker弹出窗口仅显示一次，从第二次它不再显示

编辑：似乎在点击要选择的日期后，datepicker-popup未更新为false，因此从第二次起，它不会显示。如果我删除模态对话框只需使用datepicker，那么在选择日期后$scope.opened会正确更新为false。

以下是代码：

HTML

$scope.opened

JS

<!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>

Answer 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" />

在ng模型中使用时，angular-ui的datepicker-popup没有显示

1 个答案: