ng-enter 不调用任何函数答案

【问题标题】：ng-enter with out calling any functionng-enter 不调用任何函数
【发布时间】：2015-12-17 20:16:17
【问题描述】：

以下代码是 todo-list 代码的一部分。

第一行是一个输入框，其值可通过newTodo访问。输入框用于在待办事项列表中键入新任务.

 <input class="todoField" id="newTodoField" type="text" ng-model="newTodo" placeholder="Add New Todo" ng-enter>
    <button id="todoSubmit" class="btn btn-default" ng-click="addTodo()">Add</button>

将新键入的任务名提交给js有两种方式。

1。输入任务名称后只需点击代码的添加按钮（按钮在第二行）。调用addTodo()js用于在待办事项列表中添加输入文本的函数。

2.输入任务名称后只需在输入框中按回车键即可。

疑问在于第二种方法。因为 ng-enter 没有调用任何函数。它只是简单地写在标签的末尾。（如果代码就像ng-enter="addTodo()" 意味着我会清楚明白了）

更重要的是，即使 ng-enter 在第二次没有调用任何函数方法效果很好。ng-enter 模型应该如何调用 addTodo()函数。

完整代码可在this_link 中找到。完整程序的demo可在this_link获得

对不起，如果问题非常基本。

【问题讨论】：

也许this link 回答了你的问题？

标签： javascript jquery html angularjs angular-ngmodel

【解决方案1】：

问题在于第二种方法。因为 ng-enter 不调用任何函数。只是简单地写在标签的末尾。（如果代码像ng-enter="addTodo()" 表示我会清楚地理解）

坦率地说，角度文档中没有关于 ng-enter 的文档，但您可以使用指令 ngEnter 使其工作，例如：

app.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown", function(ev) {
            if(ev.which === 13) {
                scope.addTodo();
                ev.preventDefault();
            }
        });
    };
});

【讨论】：

@sivashanmugamkannan 很高兴为您提供帮助，欢迎您

【解决方案2】：

你不能在文本框上添加一个监听器吗？如本链接所示：EventListener Enter Key

你可以得到这样的东西：

$(function(){
  document.querySelector('#newTodoField').addEventListener('keypress',function(e){
  var key = e.which || e.keyCode;
  if (key === 13) { // 13 is enter
   addTodo();
  }
 });
});

【讨论】：