Question

在下面的示例中，如果最后一个字段不为空，则会添加一个新字段（通过向$ scope添加一个空行）。问题是新的字段没有及时添加到DOM以获得焦点。

有没有办法检测angular何时将新字段附加到DOM然后将焦点传递给它？

请否“计时器”解决方案;更改DOM所需的时间是未知的，我需要尽快进行此焦点切换。我们可以做得更好！

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加载后运行，如this问题的答案中所述。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这是一个视图问题，因此应该使用指令处理。

这样做的一种方法是创建一个指令，在链接时抓取焦点：

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

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

  }
});

并像这样使用它：

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

<强> Demo

如何在焦点出现时立即将焦点传递给新字段（角度1.4）？

2 个答案: