AngularJS textarea输入带有自动完成功能的密钥提交表单

Question

您好，我想在我的文本区域内按 Enter 时提交我的表单。

我的 textarea 有一个在 angularjs 指令中创建的自动完成表单 (autocompleteAngularExpression)

我试过这个：

<textarea ng-keyup="$event.keyCode == 13 && submit()" 
id="inputId" autocomplete-angular-expression> 
</textaera>

问题是，当我在文本区域的自动完成中按 Enter 时，我提交了表单。

只有在显示自动完成表单时我才能提交表单？

我的指令有点复杂。

在范围内我有未解析的值

 directive('autocompleteAngularExpression', ['_', '$', function(_, $) {

        function split(val) {
            return val.split( /\s+/ );
        }

        function extractLast(term) {
            return term.split(/[()-\s]+/).pop();
        }

        return {
            require: 'ngModel',
            scope: {
                indexed : "=indexedValue",
                nonIndexedValue : "=nonIndexedValue"
            },
            link: function(scope, element, attrs, ngModel) {

                function containsSomeIndexed(words) {
                    return _.some(words, function(word) {
                        return _.contains(scope.indexedValue, word);
                    });
                }

                ngModel.$parsers.unshift(function(expression) {
                    if (!expression || expression === "") {
                        ngModel.$setValidity('indexValid', true);
                    } else {
                        ngModel.$setValidity('indexValid', containsSomeIndexed(expression.split(/[()-:\s]+/)));
                    }
                    return expression;
                });

                element.autocomplete({
                    minLength: 1,
                    source: function(request, response) {
                        var sourceList;
                        if (containsSomeIndexed(request.term.split(/[()-:\s]+/))) {
                            sourceList = _.union(scope.indexedValue, scope.nonIndexedValue);
                        } else {
                            sourceList = scope.indexedValue;
                        }
                        response($.ui.autocomplete.filter(sourceList, extractLast(request.term)));
                    },
                    focus: function() {
                        return false;
                    },
                    select: function(event, ui) {
                        var selectedValue = ui.item.value;
                        var terms = split(this.value);
                        var partial = terms.pop();
                        var prependBuffer = "";
                        while (partial.charAt(0) === '(' || partial.charAt(0) === '-') {
                            prependBuffer = prependBuffer + partial.charAt(0);
                            partial = partial.substring(1, partial.length);
                        }
                        terms.push(prependBuffer + selectedValue);
                        return false;
                    }
              });
            }
        };
    }]).

Answer 1

不是每次都在指令ng-enter上写$event.keyCode == 13， 这将为您解决问题。

试试

<textarea ng-enter="submit()" id="inputId" autocomplete-angular-expression> </textaera>

添加此指令以获取ngEnter

app.directive('ngEnter', function() {
    return function(scope, element, attrs) {
        element.bind("keydown", function(e) {
            if(e.which === 13) {
                scope.$apply(function(){
                    scope.$eval(attrs.ngEnter, {'e': e});
                });
                e.preventDefault();
            }
        });
    };
});

Reference Link