Вызов функции на 'Enter' нажмите

Question

Вот мой HTML код:

<div class="panel-footer"> 
    <div class="input-group"> 
     <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend"> 
     <span class="input-group-btn"> 
      <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button> 
     </span> 
    </div> 
</div> 

А вот мой JQuery код:

$('.message').keypress(function (e) { 
    if (e.which == 13) { 
     var msg = $(this).val(); 
     var id = $(this).closest('span').next('button.btn_chat').val(); 
     alert(id+"  "+msg); 
     sendMessage(msg,id); 
    } 
    e.preventDefault(); 
}); 

Вот моя функция отправки сообщения:

var sendMessage = function(messageToSend,id) { 
    // $log.debug(messageToSend); 
    id = parseInt(id); 
    if(messageToSend.length != 0){ 
     $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) { 
      $log.debug(response.data); 
      $('input.message').val(""); 
     }); 
    } 
}; 

Теперь я хочу позвонить в свою функцию sendMessge, когда кнопка ввода нажимает после сообщения.

Но когда я нажимаю кнопку ввода, мой jQuery не запускается. Как я могу решить эту проблему?

Answer 1

Угловой механизм, вы можете создать form и использовать ngSubmit для привязки функции для выполнения при отправке формы.

Итак, когда Введите будет нажата форма будет отправлена.

HTML метод

<div class="panel-footer"> 
    <div class="input-group"> 
     <form ng-submit="sendMessage(messageToSend, 79)"> 
      <input id="btn-input" class="form-control input-sm chat_input message" type="text" placeholder="Write your message here..." ng-model="messageToSend" /> 
      <span class="input-group-btn"> 
       <button id="btn_chat" class="btn btn-primary btn-sm btn_chat" value="79">Send</button> 
      </span> 
     </form> 
    </div> 
</div> 

Добавить в контроллере

$scope.sendMessage = function(messageToSend,id) { 
    // $log.debug(messageToSend); 
    id = parseInt(id); 
    if(messageToSend.length != 0){ 
     $http.post('/chat/send/',{message:messageToSend,chat_room_id:id}).then(function (response) { 
      $log.debug(response.data); 
      $('input.message').val(""); 
     }); 
    } 
}; 

---

Если вы не хотите использовать form, то вы можете использовать ngKeyup

<input ng-keyup="$event.keyCode == 13 ? sendMessage(messageToSend, 79): null" ng-model="messageToSend" > 

Answer 2

Вы используете линию

var id = $(this).closest('span').prev('button.btn_chat').val(); 

однако, $(this) в этом случае является <input> элемент, который не находится внутри <span>. Поэтому .closest('span') будет возвращать пустой набор.