javascript - 在AngularJs的html表单内集中第一个空输入

我正在尝试使用angularjs指令在html表单内集中第一个空输入。这是我到目前为止编写的指令代码(并应用于form元素):

.directive('focusFirstEmptyInput', ['$timeout', function ($timeout) {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {

                var focustElement = function () {
                    var keepGoing = true;
                    angular.forEach(element[0], function (field) {
                        if (!keepGoing) {
                            return;
                        }

                        if (field.tagName.toLowerCase() !== 'input')
                            return;

                        debugger;
                        var fieldValue = field.value;
                        if (!fieldValue) {
                            field.focus();
                            keepGoing = false;
                        }
                    });
                };

                $timeout(focustElement, 0);
            }
        };
    }]);

我正在遍历所有表单元素，并尝试着重于第一个空白字段。但是，当我调用focus()时，element没有被聚焦。可能是什么原因？

更新:

很奇怪，但是如果我删除调试器语句(或根本不打开检查器模式)并且不暂停javascript代码，它将首先关注空元素...。(我使用的是Google Chrome)

柱塞:http://plnkr.co/edit/YT0DoTjUVrrnVwmyrX0v?p=preview

最佳答案

您在错误的地方超时。您可以使用jquery进行一些提升。我不确定如何对空的输入进行过滤，因此使用了for循环(请改善这一点)。

将此指令添加到模块中，然后在要为其设置焦点的父元素上添加属性“focus-first”。

.directive('focusFirst', ['$timeout', function ($timeout) {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                $timeout(function() {
                    var inputs = element.find('input'),
                        count = inputs.length;

                    for (var i = 0; i < count; i++) {
                        if (inputs[i].value) {
                            continue;
                        }
                        inputs[i].focus();
                        break;
                    }
                }, 0);
            }
        };
    }]);