ngblur并输入事件:为什么输入键两个http调用去?

时间:2018-01-24 07:48:16

标签: javascript angularjs onblur

我有一个表单,其中有enter-key新闻事件和ng-blur。这就像当用户输入内容并在其他地方点击时,如果用户写入内容并按回车,则提交表单并提交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'));
        }
    });   
}

1 个答案:

答案 0 :(得分:2)

您对keydownkeypress事件具有约束力:

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

为Enter键触发了两个事件,因此处理程序执行了两次。

选择一个或另一个。