angularJS綁定到輸入的回車鍵，如果輸入是按鈕則提交

Question

我有這樣的指令，轉到模態窗口中的下一個輸入（或按鈕）：

.directive('autoVrm', function () {
    return function (scope, element, attrs) {
                var counter = 0;
            element.bind("keydown keypress", function (event) {
                console.log(element);           
                if(event.which === 13) {
                        counter++;
                    event.preventDefault();
                    var elementToFocus = element.find('input')[counter] || element.find('button')[1];
                    console.log(elementToFocus.type);
                    if(angular.isDefined(elementToFocus))
                        elementToFocus.focus();
                    if (elementToFocus.type === 'button'){
                        counter = -1;
                        elementToFocus.bind("keydown keypress", function (eventSubmit) {
                            if(eventSubmit.which === 13) {
                                console.log('submit');
                            }
                        });
                    }
                }
            });
        };

但我有一個麻煩，如果我在按鈕上，然后點擊輸入我得到：

Uncaught TypeError: undefined is not a function

但為什么？ 如何進入點擊提交表格？ 不依賴於控制器？

Answer 1

嘗試使用angular.element（elementToFocus）.bind作為Uncaught TypeError。

關於你的新評論：

如果在控制器中定義了這個

$scope.registerUser = function() {
    ...
}

然后簡單地在指令中調用它

elementToFocus.bind("keydown keypress", function (eventSubmit) {
    if(eventSubmit.which === 13) {
        scope.registerUser();
    }
});

作為猜測，您可以執行類似檢查attrs參數以獲取'data-ng-click'的值並調用相應函數的操作：

elementToFocus.bind("keydown keypress", function (eventSubmit) {
    if(eventSubmit.which === 13) {
        if (attrs.dataNgClick == "registerUser()" {
            scope.registerUser();
        }
        else if (attrs.dataNgClick == "sign()" {
            scope.sign();
        }
        else if (attrs.dataNgClick == "frgtPassword()" {
            scope.frgtPassword();
        }
    }
});

Answer 2

此行為已在Web技術中定義。 當您在表單中按Enter時，它將被提交。 為此，您需要處理正確的事件（ng-submit）。 您可以使用更少的代碼實現您正在尋找的效果。

 angular.module('app', []) .controller('MyCtrl', function () { var self = this; self.message = "press ENTER to submit"; self.count = 0; this.onSubmit = function () { self.count++; self.message = "form submitted " + self.count + " times"; }; });

 <!DOCTYPE html> <html ng-app="app"> <head> <script data-require="angular.js@*" data-semver="1.4.0-beta.1" src="https://code.angularjs.org/1.4.0-beta.1/angular.js"></script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="MyCtrl as ctrl"> <h1>Hello Stack Overflow!</h1> <form ng-submit="ctrl.onSubmit()"> <input type="text" placeholder="press ENTER"/> <input type="text" placeholder="press ENTER"/> <input type="submit" value="Send" /> </form> <div>{{ctrl.message}}</div> </body> </html>

angularJS綁定到輸入的回車鍵，如果輸入是按鈕則提交

問題描述

2 個解決方案

解決方案1
2 已采納 2015-01-23 10:14:13

解決方案2
1 2015-01-23 10:33:13

angularJS綁定到輸入的回車鍵，如果輸入是按鈕則提交

問題描述

2 個解決方案

解決方案1 2 已采納 2015-01-23 10:14:13

解決方案2 1 2015-01-23 10:33:13

解決方案1
2 已采納 2015-01-23 10:14:13

解決方案2
1 2015-01-23 10:33:13