Question

我正在使用angularjs添加动态列，并且其工作正常。但问题是，当我从函数中添加它时想要将焦点设置为动态添加元素，但是如果我在添加函数后尝试，则表示该元素尚未创建。有关详细信息，请查看我的代码。

$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();
    }

},

在添加列之后，未找到Element内部的流程。

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 添加到span元素以允许它们被聚焦。另外，我建议您使用指令来处理此任务。这比以jQuery样式查找这些元素更为Angular。

这里有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，span应该有tabindex设置。

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

在此之后，以下应该有效。

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

希望它有所帮助。

Angularjs设定了焦点

2 个答案: