Gửi biểu mẫu khi nhấn Enter với AngularJS

Trong trường hợp cụ thể này, tôi có những tùy chọn nào để làm cho các đầu vào này gọi một hàm khi tôi nhấn 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');
    };
}])

Angular hỗ trợ này ra khỏi hộp. Bạn đã thử ngSubmit trên phần tử biểu mẫu của bạn chưa?

<form ng-submit="myFunc()" ng-controller="mycontroller">
   <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
</form>

EDIT: Mỗi nhận xét liên quan đến nút gửi, hãy xem Gửi biểu mẫu bằng cách nhấn enter mà không có nút gửi sẽ đưa ra giải pháp:

<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>

Nếu bạn không thích giải pháp nút gửi ẩn, bạn sẽ cần liên kết một chức năng của bộ điều khiển với sự kiện nhấn phím hoặc nhấn phím. Điều này thường yêu cầu một chỉ thị tùy chỉnh, nhưng thư viện AngularUI đã có một giải pháp nhấn phím đẹp mắt. Xem http://angular-ui.github.com/

Sau khi thêm lib angularUI, mã của bạn sẽ giống như:

<form ui-keypress="{13:'myFunc($event)'}">
  ... input fields ...
</form>

hoặc bạn có thể liên kết phím nhấn vào từng trường riêng lẻ.

Ngoài ra, hãy xem câu hỏi SO này để tạo một lệnh keypres đơn giản: Làm cách nào tôi có thể phát hiện onKeyUp trong AngularJS?

EDIT (2014-08-28): Tại thời điểm câu trả lời này được viết, ng-keypress / ng-keyup / ng-keydown không tồn tại như các chỉ thị gốc trong AngularJS. Trong các ý kiến ​​dưới đây @ darlan-alves có một giải pháp khá hay với:

<input ng-keyup="$event.keyCode == 13 && myFunc()"... />

Nếu bạn muốn gọi hàm mà không cần biểu mẫu, bạn có thể sử dụng lệnh ng Entry của tôi:

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>

Tôi gửi cho người khác những chỉ thị tuyệt vời trên twitter và tài khoản chính của tôi .

Nếu bạn chỉ có một đầu vào, bạn có thể sử dụng thẻ biểu mẫu.

<form ng-submit="myFunc()" ...>

Nếu bạn có nhiều đầu vào hoặc không muốn sử dụng thẻ biểu mẫu hoặc muốn đính kèm chức năng nhập khóa vào một trường cụ thể, bạn có thể đặt nội tuyến vào một đầu vào cụ thể như sau:

<input ng-keyup="$event.keyCode == 13 && myFunc()" ...>

Tôi muốn một cái gì đó mở rộng / ngữ nghĩa hơn một chút so với các câu trả lời đã cho nên tôi đã viết một lệnh lấy một đối tượng javascript theo cách tương tự như tích hợp ngClass:

HTML

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

Các giá trị của đối tượng được đánh giá trong ngữ cảnh phạm vi của lệnh - đảm bảo chúng được đặt trong các dấu ngoặc đơn nếu không tất cả các hàm sẽ được thực thi khi lệnh được tải (!)

Vì vậy, ví dụ: esc : 'clear()'thay vìesc : clear()

Javascript

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]);
                    });
                }
            });
        };
    }]);

Một cách tiếp cận khác là sử dụng ng-keypress,

<input type="text" ng-model="data" ng-keypress="($event.charCode==13)? myfunc() : return"> 

Gửi đầu vào khi nhấn Enter bằng AngularJS - jsfiddle

Rất tốt, sạch sẽ và chỉ thị đơn giản với sự thay đổi + nhập hỗ trợ:

app.directive('enterSubmit', function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('keydown', function(event) {
                 var code = event.keyCode || event.which;
                 if (code === 13) {
                       if (!event.shiftKey) {
                            event.preventDefault();
                            scope.$apply(attrs.enterSubmit);
                       }
                 }
            });
        }
    }
});

Nếu bạn muốn xác thực dữ liệu quá

<!-- form -->
<form name="loginForm">
...
  <input type="email" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="email"... />
  <input type="password" ng-keyup="$loginForm.$valid && $event.keyCode == 13 && signIn()" ng-model="password"... />
</form>

Bổ sung quan trọng ở đây là $loginForm.$validsẽ xác nhận mẫu trước khi thực hiện chức năng. Bạn sẽ phải thêm các thuộc tính khác để xác thực nằm ngoài phạm vi của câu hỏi này.

Chúc may mắn.

Chỉ muốn chỉ ra rằng trong trường hợp có nút gửi ẩn, bạn có thể chỉ cần sử dụng lệnh ngShow và đặt thành sai như vậy:

HTML

<form ng-submit="myFunc()">
    <input type="text" name="username">
    <input type="submit" value="submit" ng-show="false">
</form>

Sử dụng ng-submit và chỉ bọc cả hai đầu vào trong các thẻ mẫu riêng biệt:

<div ng-controller="mycontroller">

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

  <br />

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

</div>

Việc gói từng trường đầu vào trong thẻ biểu mẫu riêng của nó cho phép ENTER gọi trình trên cả hai biểu mẫu. Nếu bạn sử dụng một thẻ biểu mẫu cho cả hai, bạn sẽ phải bao gồm nút gửi.

Sẽ gọn gàng hơn khi sử dụng lớp CSS thay vì lặp lại các kiểu nội tuyến.

CSS

input[type=submit] {
    position: absolute;
    left: -9999px;
}

HTML

<form ng-submit="myFunc()">
    <input type="text" ng-model="name" />
    <br />
    <input type="text" ng-model="email" />
    <input type="submit" />
</form>

FWIW - Đây là một lệnh tôi đã sử dụng cho một phương thức bootstrap xác nhận / cảnh báo cơ bản, mà không cần phải có <form>

(chỉ cần tắt hành động nhấp chuột jQuery cho bất cứ điều gì bạn thích và thêm data-easy-dismissvào thẻ phương thức của bạn)

app.directive('easyDismiss', function() {
    return {
        restrict: 'A',
        link: function ($scope, $element) {

            var clickSubmit = function (e) {
                if (e.which == 13) {
                    $element.find('[type="submit"]').click();
                }
            };

            $element.on('show.bs.modal', function() {
                $(document).on('keypress', clickSubmit);
            });

            $element.on('hide.bs.modal', function() {
                $(document).off('keypress', clickSubmit);
            });
        }
    };
});