Question

我有一个模型对象列表，在视图中显示ng-repeat元素input指令，可编辑。有一个Add new按钮可以将新项目添加到列表中，从而创建一个新的空input。但是一旦在视图中创建了新的空输入，我希望它能够被聚焦并准备好进行编辑。我不知道如何解决这个问题，因为我几乎无法访问控制器中的DOM，控制器就是我将新的空模型添加到列表中的位置。

我还是AngularJS的新手，编写这个应用程序来学习。所以，请告诉我在实施过程中我做错的其他事情。

Plunker：http://plnkr.co/Ig4OtuUtFatIknO1Kfxi

有趣的代码：

HTML：

<body ng-controller=PlanetCtrl>
  <div>
    <input ng-repeat='it in planets' type=text ng-model=it.name edit-spotlight>
  </div>
  <button ng-click=addNew() class='btn btn-primary'>+ Add new item</button>
  <div id=spotlight-shadow></div>
</body>

使用Javascript：

angular.module('planet-man', []).

// ... editSpotlight directive ...

function PlanetCtrl ($scope) {

  $scope.planets = [
    {name: 'Mercury'},
    {name: 'Venus'},
    {name: 'Earth'},
    {name: 'Mars'}
  ];

  $scope.addNew = function () {
    $scope.planets.push({name: ''});
  };

}

正如您从plunker中看到的，当单击Add按钮时，会向视图添加新输入，但必须手动对焦。我希望它在点击Add按钮后立即获得焦点（并且会出现聚光灯效果）。

谢谢。

Answer 1

尝试以更“棱角分明”的方式执行此操作：http://plnkr.co/edit/8vtgfTqBh3sxqO0KLk4y

Answer 2

以下是您的plunker的修改版本：plnkr.co/edit/QScU5GE1EeGskbmrZCIc?p=preview

使用AngularJS添加到可在DOM中立即编辑的列表模型

2 个答案: