Javascript 关注'；这'；通过单击调用的函数中的元素

我有一个span元素，我想在单击span时弹出一个对话框后将其作为焦点。跨度包含两个图示符，在任何给定时刻仅显示其中一个图示符。当项目尚未签入时，将显示

未选中的

图标，项目签入后，将显示

已选中的

图标

<span ng-click="checkIn(this, item)">
  <span class="glyphicon glyphicon-unchecked" style="display:inline"></span>
  <span class="glyphicon glyphicon-checked" style="display:none"></span>
<span>

即使

elem

确实是一个非空对象，调用

elem.focus（）

似乎什么也做不了；对话框div关闭（隐藏）后，焦点将返回到浏览器窗口中的顶部元素

我还尝试传递

$event

对象并使用

$event.target

，但结果相同

我还尝试传递span的ID并使用

document.getElementById（）

访问它，但结果仍然相同

---

我做错了什么？

首先，您可能以非最佳方式进行操作，在控制器中执行一些DOM操作。所以你可能想检查一下这个关于Angular的最佳实践

但是关于实际问题。确实需要使用

$event.target

对象：

ng-click="checkIn($event, item)"

然后集中注意力

function checkIn(e, item) {
    // ...code to display pop-ups and check item in/out...
    e.target.focus();
}

为此，请确保跨度具有负属性，以便可以通过编程方式对其进行聚焦：

<span tabindex="-1" class="glyphicon glyphicon-unchecked" style="display:inline"></span>

---

我无法将

span

元素直接正确地传递给

ng click

处理程序函数，因此我采用了使用唯一ID命名它并将ID传递给函数的方法

<tr ng-repeat="item in items track by $index">
  <td>
    <span id="chk_{{$index}}" ng-click="checkIn('chk_'+$index, item)">
      <span ...></span>
      <span ...></span>
    </span>
    ...
  </td>
  ...
</tr>

---

棘手的部分是将

$index

值正确地传递给click handler函数。

如果您展示了设置焦点的角度方式，那就太好了。@JuanMendes这将是一个指令。所有DOM操作都是在HTML中直接使用angular完成的（使用

ng if

和

ng show

）。仍然无法设置焦点。@DavidRTribble，我总是使用$timeout为某些组件设置焦点。。。尝试使用$timeout。。。

<tr ng-repeat="item in items track by $index">
  <td>
    <span id="chk_{{$index}}" ng-click="checkIn('chk_'+$index, item)">
      <span ...></span>
      <span ...></span>
    </span>
    ...
  </td>
  ...
</tr>

function checkIn(elem, item)
{
    ...code to display pop-ups and check item in/out...
    var e = document.getElementById(elem);   //elem is 'chk_nnn'
    if (e)
        e.focus();
}