Question

日期选择器似乎只在第一次点击时工作，之后就不会弹出。我猜它与某些交叉变量或函数定义有关，但我无法弄清楚如何修复它。

这是代码： http://plnkr.co/edit/ridTspMBHE1iphrSobQr?p=preview

HTML

<div ng-controller="ModalDemoCtrl">
    <button class="btn btn-info" ng-click="open_modal()">Edit</button>

    <script type="text/ng-template" id="notificationInput.html">
        <div class="modal-header">
            <h3 class="modal-title">My Modal</h3>
        </div>
        <div class="modal-body">
            <form role="form">
                <div class="form-group">
                    <label for="n_title">Title</label>
                    <input type="text" class="form-control" id="n_title" value="{{selectedNotification.title}}">
                </div>

                <div class="form-group">
                    <label for="n_release">Release</label>
                    <p class="input-group">
                        <input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" 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>
                </div>
            </form>

        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>
</div>

的Javascript

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open_modal = function(notification) {

        $scope.selectedNotification = notification;
        var modalInstance = $modal.open({
            templateUrl: 'notificationInput.html',
            controller: ModalInstanceCtrl,
            scope: $scope
        });
    };
};

var ModalInstanceCtrl = function ($scope, $modalInstance) {

    $scope.ok = function () {
        $modalInstance.close();
    };

    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };

    $scope.today = function() {
        $scope.dt = new Date();
    };
    $scope.today();

    $scope.clear = function () {
        $scope.dt = null;
    };

    // Disable weekend selection
    $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
    };

    $scope.toggleMin = function() {
        $scope.minDate = $scope.minDate ? null : new Date();
    };
    $scope.toggleMin();

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

        $scope.opened = true;
    };

    $scope.dateOptions = {
        formatYear: 'yy',
        startingDay: 1
    };

    $scope.initDate = new Date('2016-15-20');
    $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
    $scope.format = $scope.formats[0];

};

Answer 1

当你在模态中使用它时，存在范围问题。您只需使用$parent.opened代替opened。

修改后的HTML

<input type="text" id="n_release" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="$parent.opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />

Working DEMO

Answer 2

这对我有用：

在html中，将is-open="opened"替换为is-open="field.opened"

和控制器中的相同，替换

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

通过

$scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();
    $scope.field.opened = true;
};

模态中的Angular UI Bootstrap datepicker仅在第一次单击时工作

2 个答案: