加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 17:20:17 所属栏目:安全 来源:网络整理
导读:日期选择器似乎只在第一次点击时工作,然后它不会弹出.我猜它与某些交叉变量或函数定义有关,但我无法弄清楚如何修复它. 这是代码: http://plnkr.co/edit/ridTspMBHE1iphrSobQr?p=preview HTML div ng-controller="ModalDemoCtrl" button class="btn btn-info
日期选择器似乎只在第一次点击时工作,然后它不会弹出.我猜它与某些交叉变量或函数定义有关,但我无法弄清楚如何修复它.

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读