如何在新字段出現時立即將焦點傳遞給新字段（角度1.4）？

Question

在下面的示例中，當最后一個字段不為空時失去焦點時，將添加新字段（通過在$ scope上添加空白行）。 問題在於新字段沒有及時添加到DOM中以獲取焦點。

有沒有一種方法可以檢測角度何時完成將新字段附加到DOM，然后將焦點傳遞給它？

請沒有“計時器”解決方案； 更改DOM所需的時間未知，我需要盡快進行焦點切換。 我們可以做得更好！

JSFiddle

的HTML

<div ng-app='a' ng-controller='b'>
    <input type="text" ng-repeat="row in rows" ng-model="row.word" ng-model-options="{'updateOn': 'blur'}">
</div>

JS

angular.module('a', []).controller('b', function ($scope) {
    $scope.rows = [{'word': ''}];

    $scope.$watch('rows', function (n, o) {
        var last = $scope.rows[$scope.rows.length - 1];

        last.word && $scope.rows.push({'word': ''});        
    }, true);
});

Answer 1

使用$timeout而不指定毫秒數。 默認情況下，它將在DOM加載后運行，如對此問題的答案所述。

 angular.module('a', []).controller('b', function($scope, $timeout) { $scope.rows = [{ 'word': '' }]; $scope.addRow = function() { $scope.rows.push({ 'word': '' }); $timeout(function() { //DOM has finished rendering var inputs = document.querySelectorAll('input[type="text"]'); inputs[inputs.length - 1].focus(); }); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app='a' ng-controller='b'> <div ng-repeat="row in rows"> <input type="text" ng-model="row.word" ng-model-options="{'updateOn': 'blur'}"><br> </div> <input type="button" ng-click="addRow()" value="Add Row"> </div> 

Answer 2

這是一個與View有關的問題，因此應使用指令進行處理。

一種方法是創建一個鏈接時將焦點轉移到的指令：

.directive("focus", function(){
  return {

    link: function(scope, element){
      element[0].focus();
    }

  }
});

並像這樣使用它：

<input type="text" 
       ng-repeat="row in rows" 
       ng-model="row.word"
       focus>

演示版