setting focus to angular elements inside ng-click

Question

I want to copy the value from vm.foo to vm.bar (that works) and then set focus to vm.bar (that does not work).

<input type="text" ng-model="vm.foo" id="foo" >
<button ng-click="vm.baa=vm.foo; angular.element('#bar').focus();"></button>

<input type="text" ng-model="vm.bar" id="bar" >

How come angular.element('#bar').focus() is not working in this situation?

I didn't know `angular.element('#bar');` was a viable method of accessing DOM elements. Are you sure that `angular.element` can access an element with id `bar`? — Jarek Kulikowski, Jul 30 '17 at 22:20
@JarekKulikowski if jQuery loaded before angularjs, then yes, it is possible — Pankaj Parkar, Jul 30 '17 at 22:21
In that case perhaps replacing `angular.element` with `$` would work. — Jarek Kulikowski, Jul 30 '17 at 22:25
It works fine as long as you have it in your angular controller, but put it into the html page and it no longer works. (and $ gives error, I dont use jquery) — torbenrudgaard, Jul 30 '17 at 22:28

score 3 · Accepted Answer · answered Jul 30 '17 at 23:02

Use a custom directive to emit an event.

app.directive('focusOn', () => {
   return (scope, elem, attr) => {
      scope.$on(attr.focusOn, (e) => {
          elem[0].focus();
      });
   };
});

Usage:

<input type="text" ng-model="vm.foo">

<button ng-click="vm.baa=vm.foo; vm.changeFocus();"></button>

<input type="text" ng-model="vm.bar" focus-on="myFocusEvent">

and then in your controller

vm.changeFocus = () => {
    $scope.$broadcast('myFocusEvent');
};

Notice that I'm using arrow functions instead of named functions

Jarek Kulikowski · Answer 2 · 2017-07-30T22:37:49.803

0

I found this Accessing Dom elements in Angular

so in our case that would be

<button ng-click="vm.baa=vm.foo; angular.element(document.querySelector('#bar')).focus();"></button>

I wonder if that fixes your problem. Actually I would change it to

ng-click="vm.baa=vm.foo; setFocus();"

and in the controller

vm.setFocus = function() {
    angular.element(document.querySelector('#bar'));
}

edited Jul 30 '17 at 22:37

answered Jul 30 '17 at 22:24

Jarek Kulikowski

1,399
8
9

Sorry - no effect at all. Even when I put this into the controller it does nothing. – torbenrudgaard Jul 30 '17 at 22:30
I find that I need to use `setTimeout` to do `focus` otherwise it doesn't work for me either; I think it has to be done in the controller. – Jarek Kulikowski Jul 30 '17 at 22:31
I think you might be right, I will give it a few more tries. – torbenrudgaard Jul 30 '17 at 22:34

setting focus to angular elements inside ng-click

2 Answers2