光標移動到新生成的文本框在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/