ngblur 和 enter 事件:为什么在回车键上两个 HTTP 调用去

Question

我有一个表格，我有enter-key新闻发布会和ng-blur。这就像当用户输入某些内容并单击其他地方时，如果用户编写某些内容并按 Enter 表单提交并且 API 调用开始，则表单提交类似。

问题陈述

它工作正常ng-blur只有一个调用转到 API。但是当我尝试使用关键事件时，两个调用就会消失。这就是为什么会显示两条成功消息的原因。我不知道为什么，但它的行为是那样的。

形式

input ng-model="cusBoard.boardData.musicalWorkName"
      id="superTitleInput" class="title-edit-input superTitle-input" type="text"
      maxlength="50"
      my-key-enter="cusBoard.updateInfo()"
      ng-blur="cusBoard.updateInfo()">

我的密钥输入指令

app.directive('myKeyEnter', function () {
return {
    controller: 'SignInController',
    link: function (scope, elements, attrs) {
        elements.bind('keydown keypress', function (event) {
            if (event.which === 13) {
                scope.$apply(function () {
                    scope.$eval(attrs.myKeyEnter);
                });
                event.preventDefault();
            }
        });
    }
}

控制器功能

function updateInfo(){
    editable('superTitle',0);
    var params = {
        superTitle : cusBoard.boardData.musicalWorkName,
        boardId : cusBoard.boardData._id
    };
    CastingBoard.updateSuperTitle(params).then(function (res) {
        if (res.msgCode === '405') {
            $mdToast.show($mdToast.simple().textContent("Board title updated successfully.").position('bottom right'));
        }
    });   
}

Answer 1

您同时绑定了keydown事件和keypress事件：

        elements.bind('keydown keypress', function (event) {

这两个事件都是针对 Enter 键触发的，因此处理程序将执行两次。

只需选择一个或另一个。