angularjs не фокусирование на следующий элемент

Question

мой HTML-код:

<div ng-app="app"> 
<form> 
    <div class="form-group"> 
     <label >Username</label> 
     <input focus type="text" class="form-control" id="loginUserName" ng-model="userForm.crn" required/> 
     </div> 
    <div class="form-group"> 
     <label >Password</label>   
     <input focus type="password" class="form-control" id="loginPwd" ng-model="userForm.password" required/> 
    </div> 
</form> 

мой JS код:

var app = angular.module('app', []); app.directive('focus', function() { 
return { 
    restrict: 'A', 
    link: function ($scope, elem, attrs) { 

     elem.bind('keydown', function(e) { 
     var code = e.keyCode || e.which; 
     if (code === 13) { 
      console.log(elem); 
      elem.next()[0].focus(); 
      //e.preventDefault(); 
      //elem.next().focus(); 
     } 
     }); 
    } 
} 
}) 

1: этот код не фокусируется на следующем элементе при входе нажата кнопка , он показывает nextElementSibling: null и nextSibling: текст на console.log(elem) 2: но когда я удаляю ярлык тега и div в теге формы, он начинает работать, когда он фокусируется на следующем элементе.

так, вопрос, как я могу заставить его работать без удаления div и метки. почему nextElementSibling приходит null?

this is fiddle link of this code

Answer 1

ваш дом обходе Approch не так, как elem.next('') может дать вам следующий вход вам нужно, чтобы получить родитель первым, чем искать для входа в следующем DIV

следующий(): метод возвращает элемент следующих родственного выбранного элемента. Элементы сиблинга - это элементы, которые разделяют того же родителя.

попробовать

elem.bind('keydown', function (e) { 
       elem.parent('div').next().find('input').focus(); 
      }); 

Working Fiddle

Объяснение:

elem.bind('keydown', function(e) { 
       var code = e.keyCode || e.which; 
       if (code === 13) { 

        console.log(elem); // "elem" is the current element which have focus you can see it in console it's always point to the current element . 
        elem.parent('div').next().find('input')[0].focus(); //Explained as following 

       `elem.parent('div')` 
        to find parent div now we are on div which have 
        current element now `.next()` 
        to move to next div(next sibling element) and than find input inside it by `find('input')` 
        to make focus over it </b> 

        console.log(elem.parent('div')); //parent Div obj 

       } 

чек здесь angularjs-dom-selector