使用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() {

        return function(scope, element, attrs) {

            element.bind("keydown keypress", function(event) {

                if(event.which === 13) {

                    scope.$apply(function(){

                        scope.$eval(attrs.ngEnter, {'event': event});

                    });

                    event.preventDefault();

                }

            });

        };

    });

HTML：

<div ng-app="" ng-controller="MainCtrl">

    <input type="text" ng-enter="doSomething()">    

</div>

我在自己的Twitter和Gist帐户上提交了其他很棒的指令。

Answer 2

我想要的东西多一点扩展/大于给定答案的语义，所以我写了一个指令，需要一个JavaScript对象以类似的方式内置ngClass：

的HTML

<input key-bind="{ enter: 'go()', esc: 'clear()' }" type="text"></input>

在指令范围内评估对象的值-确保将其用单引号引起来，否则在加载指令时将执行所有功能（！）

因此，例如：  esc : 'clear()'代替esc : clear()

Java脚本

myModule

    .constant('keyCodes', {

        esc: 27,

        space: 32,

        enter: 13,

        tab: 9,

        backspace: 8,

        shift: 16,

        ctrl: 17,

        alt: 18,

        capslock: 20,

        numlock: 144

    })

    .directive('keyBind', ['keyCodes', function (keyCodes) {

        function map(obj) {

            var mapped = {};

            for (var key in obj) {

                var action = obj[key];

                if (keyCodes.hasOwnProperty(key)) {

                    mapped[keyCodes[key]] = action;

                }

            }

            return mapped;

        }

        return function (scope, element, attrs) {

            var bindings = map(scope.$eval(attrs.keyBind));

            element.bind("keydown keypress", function (event) {

                if (bindings.hasOwnProperty(event.which)) {

                    scope.$apply(function() {

                         scope.$eval(bindings[event.which]);

                    });

                }

            });

        };

    }]);