Angularjs設置焦點

我正在使用angularjs添加動態列和其工作正常。但問題是，當我從功能添加它想要設置焦點動態添加元素，但如果我嘗試後添加功能的DOM說元素還沒有創建。詳情請看我的代碼。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(); 
    } 

},

這裏加入列後流程進入元素沒有被發現。

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.

請給我任何建議。謝謝。

來源

2014-09-06 user3406754

也許這將有助於：http://stackoverflow.com/questions/21350572/auto-focus-in-ng-repeat-in-angularjs/21351131#21351131 – 2014-09-06 09:27:24

感謝您的評論它的工作輸入參數，但不是爲span標籤 – user3406754 2014-09-06 09:51:07

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

希望這有助於。

來源

2014-09-06 14:22:43 Teq1

我認爲，爲了得到焦點的跨度，跨度應該有tabindex設置。

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

之後，下面應該工作。

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

希望它有幫助。

來源

2014-09-06 10:16:24 Ganesh

感謝您的回覆。 – user3406754 2014-09-08 05:13:01

Angularjs設置焦點

回答

相關問題