курсор перемещается в новое сгенерированное текстовое поле в angualarjs

Question

У меня есть форма с модальным, Когда я нажимаю кнопку ввода или добавляю кнопку электронной почты, она генерирует новое текстовое поле, но курсор не перемещается в это текстовое поле.

Но мне нужно, когда я нажимаю кнопку ввода или добавления электронной почты, тогда курсор автоматически должен перейти к вновь созданному текстовому полю.

Мой HTML код

<script type="text/ng-template" id="myModalContent"> 
     <div class="modal-header"> 
      <h3 class="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
      <li ng-repeat="item in items " ng-form="subForm"> 
       <input type="text" name="name" ng-model="item.email" required ng-pattern="/^[_a-z0-9]+(\.[_a-z0-9]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,4})$/" ng-enter="addOrRemove($index,item.email)"/> 
       <span ng-show="subForm.name.$error.required" style="color: red">Email required</span> 
       <span ng-show="subForm.name.$invalid" ng-hide="subForm.name.$error.required" style="color: red">Invalid email</span> 
       <button ng-disabled="subForm.name.$invalid || subFform.name.$dirty" ng-click="addOrRemove($index,item.email)" >{{item.value}}</button> 
       expression: {{subForm.name.$invalid}} 
      </li> 

     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" ng-click="ok()">OK</button> 
      <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
     </div> 
    </script> 

Мой код Javascript

$scope.addOrRemove = function(indexSelected,rcvEmail) 
{//alert($rootScope.email1); 

    if(!rcvEmail) 
    { 
     return 
    } 
    console.log("just check email",rcvEmail); 
    console.log("length of the object",$scope.items.length); 
    event.preventDefault(); 
    if($scope.items[indexSelected].state == 1) 
    { 
     //console.log($scope.items[indexSelected].state); 
     $scope.items[indexSelected].value = "Remove email"; 
     $scope.items[indexSelected].state = "0"; 
     $scope.items[indexSelected].email = rcvEmail; 
     $scope.items.push({value: "Add email", state: "1"}); 
    } 
    else 
    { 
     //console.log($scope.items[indexSelected].state); 
     //$scope.items.push({value: "Remove email", state: "1"}); 
     $scope.items.splice(indexSelected, 1); 
    } 

}; 

see the code here

Answer 1

Для того, чтобы сфокусировать вход, вы должны создавать собственные директивы.

.directive('focus', function($timeout, $parse) { 
    return { 
     restrict: 'A', 
     link:  function(scope, element, attrs) { 
      scope.$watch(attrs.focus, function(newValue, oldValue) { 
       if(newValue) { 
        element[0].focus(); 
       } 
      }); 
      element.bind("blur", function(e) { 
       $timeout(function() { 
        scope.$apply(attrs.focus + "=false"); 
       }, 0); 
      }); 
      element.bind("focus", function(e) { 
       $timeout(function() { 
        scope.$apply(attrs.focus + "=true"); 
       }, 0); 
      }) 
     } 
    } 
}) 

И затем вы можете использовать его во входном сигнале.

<input type="text" ng-init="inp_focus = true" focus="inp_focus" /> 

Пожалуйста, проверьте этот пример.

http://jsfiddle.net/Serhioromano/bu2k2cb7/