在 ngModel 中使用时不显示 angular-ui datepicker-popup答案

【问题标题】：angular-ui's datepicker-popup doesnot shown when using in ngModal在 ngModel 中使用时不显示 angular-ui datepicker-popup
【发布时间】：2014-11-23 07:16:08
【问题描述】：

我正在将 angular-ui 的 datepicker-popup 与 ngModal (https://github.com/adamalbrecht/ngModal) 集成，但我遇到的问题是 datepicker 弹出窗口只显示一次，从第二次开始就不再显示了。

编辑：似乎在我点击一个日期进行选择后，$scope.opened 没有更新为 false，所以从第二次开始就没有显示。如果我删除模态对话框，只需使用 datepicker，那么 $scope.opened 在选择日期后会正确更新为 false。

代码如下：

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;
    };
}]);

【问题讨论】：

标签： angularjs datepicker

【解决方案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" />

【讨论】：

(First Answer Review) 尽量避免在 Answers 中提问。