使用AngularJS按Enter提交表单

Question

在这种情况下，按Enter键时必须使这些输入调用函数的选项是什么？

// HTML view //

<form>

    <input type="text" ng-model="name" <!-- Press ENTER and call myFunc --> />

    <br />

    <input type="text" ng-model="email" <!-- Press ENTER and call myFunc --> />

</form>

// Controller //

.controller('mycontroller', ['$scope',function($scope) {

    $scope.name = '';

    $scope.email = '';

    // Function to be called when pressing ENTER

    $scope.myFunc = function() {

       alert('Submitted');

    };

}])

Answer 1

如果要调用不带格式的函数，可以使用我的ngEnter指令：Javascript：angular.module('yourModuleName').directive('ngEnter', function() {&nbsp; &nbsp; &nbsp; &nbsp; return function(scope, element, attrs) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.bind("keydown keypress", function(event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(event.which === 13) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scope.$apply(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scope.$eval(attrs.ngEnter, {'event': event});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; });HTML：<div ng-app="" ng-controller="MainCtrl">&nbsp; &nbsp; <input type="text" ng-enter="doSomething()">&nbsp; &nbsp;&nbsp;</div>我在自己的Twitter和Gist帐户上提交了其他很棒的指令。

Answer 2

我想要的东西多一点扩展/大于给定答案的语义，所以我写了一个指令，需要一个JavaScript对象以类似的方式内置ngClass：的HTML<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>在指令范围内评估对象的值-确保将其用单引号引起来，否则在加载指令时将执行所有功能（！）因此，例如：&nbsp; esc : 'clear()'代替esc : clear()Java脚本myModule&nbsp; &nbsp; .constant('keyCodes', {&nbsp; &nbsp; &nbsp; &nbsp; esc: 27,&nbsp; &nbsp; &nbsp; &nbsp; space: 32,&nbsp; &nbsp; &nbsp; &nbsp; enter: 13,&nbsp; &nbsp; &nbsp; &nbsp; tab: 9,&nbsp; &nbsp; &nbsp; &nbsp; backspace: 8,&nbsp; &nbsp; &nbsp; &nbsp; shift: 16,&nbsp; &nbsp; &nbsp; &nbsp; ctrl: 17,&nbsp; &nbsp; &nbsp; &nbsp; alt: 18,&nbsp; &nbsp; &nbsp; &nbsp; capslock: 20,&nbsp; &nbsp; &nbsp; &nbsp; numlock: 144&nbsp; &nbsp; })&nbsp; &nbsp; .directive('keyBind', ['keyCodes', function (keyCodes) {&nbsp; &nbsp; &nbsp; &nbsp; function map(obj) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var mapped = {};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var key in obj) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var action = obj[key];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (keyCodes.hasOwnProperty(key)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; mapped[keyCodes[key]] = action;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return mapped;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return function (scope, element, attrs) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bindings = map(scope.$eval(attrs.keyBind));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; element.bind("keydown keypress", function (event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (bindings.hasOwnProperty(event.which)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scope.$apply(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;scope.$eval(bindings[event.which]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; }]);