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

前端之家收集整理的这篇文章主要介绍了angularjs – 仅在第一次点击时工作的模态中的Angular UI Bootstrap datepicker前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
日期选择器似乎只在第一次点击时工作,然后它不会弹出.我猜它与某些交叉变量或函数定义有关,但我无法弄清楚如何修复它.

这是代码
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];

};

解决方法

当你在模态中使用它时,存在范围问题.你只需要使用$parent.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

猜你在找的Angularjs相关文章