Angularjs set focus

Question

Я использую angularjs для добавления динамического столбца и его работы. Но проблема в том, что когда я добавляю его из функции, хочу установить фокус на динамически добавленный элемент, но если я попытаюсь добавить функцию, то dom сказал, что элемент еще не создан. Для получения подробной информации, пожалуйста, просмотрите мой код.

$scope.addCol = function(){ 

    //to add column dynamically assign one object to column 
    $scope.column.push({ 
     spName: "", 
     spId: 0, 
     claimedId: 0 
    }); 

    var id = $scope.column.length - 1; 

    if($('#sptext'+id).length == 0){ 

     alert("Element was not found"); 
    }else{ 

     alert("Element was found"); 
     $('#sptext'+id).focus(); 
    } 

}, 

Здесь после добавления столбца поток идет внутрь Элемент не найден.

HTML код:

<table class="table-striped" id="mainTable" name="mainTable"> 
    <thead style="border-bottom: 1px solid #dddddd;"> 
     <tr ng-if="$index == 0 && counter > 2" ng-repeat="rowContent in rows" id="{{$index}}"> 
      <td name="{{rowContent}}1"> 
       <span >Heading/Question</span> 
      </td> 
      <td ng-repeat="colContent in column" id="sp{{$index}}{{$parent.$index}}"> 
       //this span(element) I am trying to set focus while creating dynamically 
       <span contenteditable id="sptext{{$index}}" >{{colContent.spName}}</span> 
       <p style="display: none;">{{colContent.spId}}</p>&nbsp; 
      </td> 
     </tr> 
    </thead>  
</table>  

I am trying to set focus to `<span>` element but its not working. 

Пожалуйста, дайте мне какие-либо предложения. Благодарю.

Answer 1

Как Ganesh упоминалось, вы должны добавить TabIndex, чтобы охватить элементы, чтобы позволить им быть сосредоточенным. Кроме того, я советую вам использовать директиву для решения этой задачи. Это больше Угловой способ, чем поиск этих элементов в стиле jQuery.

Здесь у вас есть plnkr с примером, как подойти к этой задача:

app.controller('MainCtrl', function($scope) { 
    var item = 'item '; 

    $scope.list = [item]; 

    var i = 0; 
    $scope.addToList = function(){ 
    $scope.list.push(item + i); 
    i++; 
    } 
}); 

app.directive('focusItem', function() { 
    return { 
    link: function(scope, element, attrs) { 
     scope.$watch(attrs.focusItem, function() { 
      element[0].focus(); 
     }); 
    } 
    }; 
}); 

Надеется, что это помогло.

Answer 2

Я думаю, для диапазона, чтобы получить фокус с помощью javascript, span должен иметь набор tabindex.

<span contenteditable id="sptext{{$index}}" tabindex="{{$tabindex}}" >{{colContent.spName}}</span> 

в дальнейшем, нижеследующий должен работать.

$('#sptext'+id).focus(); 

Надеюсь, что это поможет.