Giving focus to the 'this' element in a function called by ng-click

Question

I have a span element that I want to give focus to after popping up a dialog box when the span is clicked. The span contains two glyphs, only one of which is displayed at any given moment. When the item is not checked in yet, the unchecked icon is displayed, and after the item is checked in, the checked icon is displayed.

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

Some of the details have been omitted for brevity.

The checkIn() function does all the work of checking in or checking out the item, displaying a dialog box, etc. I'd like to pass it the span element that was clicked, so that after all the check-in/check-out work is done, I can give focus back to it.

I've tried this:

function checkIn(elem, item)
{
    elem = angular.element(elem);
    ...code to display pop-ups and check item in/out...
    elem.focus();
}

Even though elem is indeed a non-null object, calling elem.focus() does not do appear to do anything; after the dialog div is closed (hidden), the focus returns to the top element in the browser window.

I've also tried passing the $event object and using $event.target, but with the same results.

I've also tried passing the ID of the span and accessing it with document.getElementById(), but still the same results.

What am I doing wrong?

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

Well, first of all you are probably doing it in not-optimal way, performing some DOM manipulations in controller. So you might want to check this very good thread regarding best practices in Angular.

But regarding the actual problem. You indeed need to use $event.target object:

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

and then focus it

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

For this make sure your spans have negative tabindex attribute, so that they can be focused programmatically:

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

edited May 23 '17 at 12:30

Community

1
1

answered Nov 12 '15 at 18:54

dfsq

191,768
25
236
258

It'd be nice if you showed the angular way of setting focus. – Ruan Mendes Nov 12 '15 at 18:59
@JuanMendes It would be a directive. – dfsq Nov 12 '15 at 19:07
All DOM manipulations are done in the HTML directly using Angular (using `ng-if` and `ng-show`). Still cannot get it to set focus. – David R Tribble Nov 13 '15 at 00:56
@DavidRTribble, I always use $timeout to set focus for some component... try to use $timeout... – Joao Polo Nov 14 '15 at 01:37

score 0 · Accepted Answer · answered Nov 14 '15 at 00:42

I could not get the span element to get directly passed properly to the ng-click handler function, so I resorted to naming it with a unique ID and passing the ID to the function.

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

(I neglected to mention that each checkbox was part of an ng-repeat table element, but I'm not sure that this has anything to do with my problem.)

The checkIn() handler function then locates the proper element and gives it focus.

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

The tricky part was passing the $index value correctly to the click handler function.

Giving focus to the 'this' element in a function called by ng-click

2 Answers2