[英]AngularJS - Accept a ui.bootstrap modal with ENTER key
The Issue: 问题:
I've been unable to to accept a modal window with the ENTER key 我一直无法用ENTER键接受模态窗口
I have modified the default Plunker to show you what I've done since now --> Here 我修改了默认的Plunker来向你展示我从现在开始做的事情 - > 这里
What I have: 是)我有的:
Briefly, the ENTER key is recognized by the modal, but it doesn't trigger my function (scope issues, I suspect). 简而言之,ENTER键被模态识别,但它不会触发我的功能(范围问题,我怀疑)。
The bad part is that I had to modifiy the template/modal/window
, which I would gladly left unspoiled, if possible. 不好的是我必须修改
template/modal/window
,如果可能的话,我很乐意保留未受破坏的template/modal/window
。
What I would love 我会喜欢什么
I would love to simply put the ng-enter
directive in my modal, without modifying the default template 我想简单地将
ng-enter
指令放在我的模态中,而不修改默认模板
Extra 额外
I've also tried to add the "event 13" to the modal
directive, but I couldn't pass any result in the modal.close
, so I dropped that road 我也尝试将“事件13”添加到
modal
指令中,但是我无法在modal.close
传递任何结果,所以我放弃了那条路
Any thought? 任何想法?
Check my Plunker . 检查我的Plunker 。 You should add ng-enter to "OK" button.
您应该将ng-enter添加到“确定”按钮。
<button class="btn btn-primary" ng-enter="ok();" ng-click="ok()">OK</button>
Maybe you are looking for something more generic, I'm not sure. 也许你正在寻找更通用的东西,我不确定。 Then you might consider watchers.
然后你可能会考虑观察者。 But personally I find this better since we don't have any constant watcher which listens modal event.
但我个人觉得这个更好,因为我们没有任何一个监听模态事件的观察者。
I have found that it is easiest just to add the enter event handler in the controller of the modal: 我发现在模态的控制器中添加enter事件处理程序是最简单的:
var text = "This is the text in the modal";
var modalPromise = $modal.open({
template:
'<div class="modal-body">' +
'<button class="close" ng-click="$dismiss(\'×\')">×</button>'+
'<h3 ng-bind="body"></h3>'+
'</div>'+
'<div class="modal-footer">'+
'<button class="btn btn-primary" ng-click="$close(\'ok\')">OK</button>'+
'<button class="btn btn-warning" ng-click="$dismiss(\'cancel\')">Cancel</button>'+
'</div>',
controller: function ($scope, $document) {
$scope.body = text;
var EVENT_TYPES = "keydown keypress"
function eventHandler(event) {
if (event.which === 13) {
$scope.$close('ok');
}
}
$document.bind(EVENT_TYPES, eventHandler);
$scope.$on('$destroy', function () {
$document.unbind(EVENT_TYPES, eventHandler);
})
}
}).result;
AngularJS support this be default. AngularJS支持这是默认值。
Add a <form>
tag in your template (modal.html) and add ng-submit
directive eg 在模板中添加
<form>
标签(modal.html)并添加ng-submit
指令,例如
<form name="questionForm" ng-submit="ok()">
<div class="modal-header">
<h3 class="modal-title">{{title}}</h3>
</div>
// the rest of the code here
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.