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
日期选择器似乎只在第一次点击时工作,然后它不会弹出.我猜它与某些交叉变量或函数定义有关,但我无法弄清楚如何修复它.
这是代码: 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 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |