forms - AngularJS:验证成功后移至下一个表单输入元素

Question

我已经编写了一个自定义指令来验证我的表单字段。当满足某些条件时(即它是脏的和有效的)，我想自动将焦点设置到下一个输入元素。这是我的用户的要求，以便他们可以最有效地浏览表单。

简化指令如下所示:

directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel', '^ngController'],
        link: function(scope, element, attrs, ctrls) {
           var model=ctrls[0], form=ctrls[1];

           scope.next = function(){
                return model.$valid
            }

            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty){
                    ???
                }
            })

现在我的问题是:我如何识别
- 下一个输入元素(即下一个兄弟元素)或可能通过 tabindex
- 并专注于它
不使用Jquery？

对我来说，目前还不清楚，如何在没有 Jquery 的情况下从可用的“范围”或“元素”属性中获取下一个输入元素；并且 JQlite 没有“聚焦”方法。基本上，我需要一个工作替代品？？？在我的代码中。

任何帮助都受到高度赞赏。谢谢
于尔根

Answer 1

您可以使用 [0]获取基础input来自 angular/jqLit​​e 对象(它没有)的元素(它有一个 focus() 函数)。

app.directive('custom', ['$parse', function($parse) {
    return {
        restrict: 'A',
        require: ['ngModel'],
        link: function(scope, element, attrs, ctrls) {
           var model=ctrls[0], form=ctrls[1];

           scope.next = function(){
                return model.$valid;
            }

            scope.$watch(scope.next, function(newValue, oldValue){
                if (newValue && model.$dirty)
                {
                    var nextinput = element.next('input');
                    if (nextinput.length === 1)
                    {
                        nextinput[0].focus();
                    }
                }
            })
        }
    }
}])

http://jsfiddle.net/Y2XLA/