Basculer le focus entre les champs dans Angularjs

Question

Je dois basculer entre les champs si l'utilisateur appuie sur Entrée. Et si les deux champs (login & pwd) ne sont pas vides, $ scope.submit est appelé. La question est comment puis-je changer de focus entre ces deux champs? Je peux le faire en utilisant document.getElementByid, mais s'il n'y a pas d'identifiant attr? Comment puis-je obtenir une balise angularjs html avec ng-model pour régler le focus?

JS:

app.controller('loginCtrl', function($scope, $location, $rootScope,$http){ 
$scope.username = ''; 
$scope.password = ''; 
$scope.enter=function(){ 
    if ($scope.username!="" && ($scope.password=="" || $scope.password==undefined)) document.getElementById("password").focus(); 
    else if($scope.password!="" && ($scope.username=="" || $scope.username==undefined)) document.getElementById("username").focus(); 
    else if($scope.password!="" && $scope.username!="") $scope.submit(); 
}; 
$scope.submit=function(){ 
    var data={}; 
    data.login=$scope.username; 
    data.pwd=$scope.password; 
    $http.post("authorization.php", data).then(function success (response) { 
     console.log(response); 
     if (response.data['loggin'] === true) { 
      $rootScope.loggedIn = true; 
      $location.path('/dashboard'); 
      $rootScope.name = response.data['name']; 
     } 
     else { 
      $scope.username = ''; 
      $scope.password = ''; 
     } 
    },function error (response){ 
     console.log(response); 
    } 
    ); 

} 
}); 

HTML:

<div ng-controller="loginCtrl" class="login"> 
    <form action="/" id="myLogin" method="post"> 
     <input type="text" name="username" id="username" ng-model="username" placeholder="Username" required="required" class="input-txt" ng-keyup="$event.keyCode == 13 ? enter() : null"><br> 
     <input type="password" name="password" id="password" ng-model="password" placeholder="Password" required="required" class="input-txt" ng-keyup="$event.keyCode == 13 ? enter() : null"><br> 
     <br> 
     <button type="button" ng-click="submit()" class="btn btn--right">Login</button> 
    </form> 
</div> 

Answer 1

J'espère que cela vous aidera à vous out.Thank.

HTML

directive

directive('focusMe', function() { 
     return { 
     link: function (scope, element, attrs) { 
      scope.$watch(attrs.focusMe, function (value) { 
      if (value === true) { 
       console.log('value=', value); 
       element[0].focus(); 
       scope[attrs.focusMe] = false; 
      } 
      }); 
     } 
     }; 
    }); 

Contrôleur

Dans le contrôleur défini VRAI/FAUX pour $ scope.setFocusValueName & $ scope.setFocusValuePwd sur la base votre exigence.

$ scope.setFocusValueName = true/false; $ scope.setFocusValuePwd = true/false;