¿Cómo establecer el foco en el campo de entrada?

¿Cuál es la 'forma angular' para establecer el foco en el campo de entrada en AngularJS?

Requisitos más específicos:

1. Cuando se abre un Modal , enfóquese en uno predefinido <input>dentro de este Modal.
2. Cada vez que <input>sea ​​visible (por ejemplo, haciendo clic en algún botón), establezca el foco en él.

Intenté cumplir el primer requisito con autofocus, pero esto funciona solo cuando se abre el Modal por primera vez, y solo en ciertos navegadores (por ejemplo, en Firefox no funciona).

Cualquier ayuda será apreciada.

1. Cuando se abre un Modal, fije el foco en un <input> predefinido dentro de este Modal.

Defina una directiva y haga que $ vea una propiedad / disparador para que sepa cuándo enfocar el elemento:

Name: <input type="text" focus-me="shouldBeOpen">

app.directive('focusMe', ['$timeout', '$parse', function ($timeout, $parse) {
    return {
        //scope: true,   // optionally create a child scope
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                console.log('value=', value);
                if (value === true) {
                    $timeout(function () {
                        element[0].focus();
                    });
                }
            });
            // to address @blesh's comment, set attribute value to 'false'
            // on blur event:
            element.bind('blur', function () {
                console.log('blur');
                scope.$apply(model.assign(scope, false));
            });
        }
    };
}]);

Saqueador

El tiempo de espera $ parece ser necesario para dar tiempo modal para renderizar.

'2.' Cada vez que <input> se hace visible (por ejemplo, haciendo clic en algún botón), establezca el foco en él.

Crea una directiva esencialmente como la de arriba. Observe algunas propiedades de alcance y, cuando se convierta en verdadero (configúrelo en su controlador ng-click), ejecute element[0].focus(). Dependiendo de su caso de uso, puede necesitar o no un tiempo de espera de $ para este:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" ng-model="myInput" focus-me="focusInput"> {{ myInput }}
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    link: function(scope, element, attrs) {
      scope.$watch(attrs.focusMe, function(value) {
        if(value === true) { 
          console.log('value=',value);
          //$timeout(function() {
            element[0].focus();
            scope[attrs.focusMe] = false;
          //});
        }
      });
    }
  };
});

Saqueador

Actualización 7/2013 : he visto a algunas personas usar mis directivas de alcance de aislamiento originales y luego tienen problemas con los campos de entrada incrustados (es decir, un campo de entrada en el modal). Una directiva sin un nuevo alcance (o posiblemente un nuevo alcance infantil) debería aliviar algo del dolor. Así que arriba actualicé la respuesta para no usar ámbitos de aislamiento. A continuación se muestra la respuesta original:

Respuesta original para 1., usando un alcance aislado:

Name: <input type="text" focus-me="{{shouldBeOpen}}">

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '@focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === "true") { 
          $timeout(function() {
            element[0].focus(); 
          });
        }
      });
    }
  };
});

Plunker .

Respuesta original para 2., usando un alcance aislado:

<button class="btn" ng-click="showForm=true; focusInput=true">show form and
 focus input</button>
<div ng-show="showForm">
  <input type="text" focus-me="focusInput">
  <button class="btn" ng-click="showForm=false">hide form</button>
</div>

app.directive('focusMe', function($timeout) {
  return {
    scope: { trigger: '=focusMe' },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if(value === true) { 
          //console.log('trigger',value);
          //$timeout(function() {
            element[0].focus();
            scope.trigger = false;
          //});
        }
      });
    }
  };
});

Plunker .

Como necesitamos restablecer la propiedad trigger / focusInput en la directiva, '=' se usa para el enlace de datos bidireccional. En la primera directiva, '@' era suficiente. También tenga en cuenta que cuando se usa '@', comparamos el valor de activación con "verdadero" ya que @ siempre da como resultado una cadena.

(EDITAR: he agregado una solución actualizada debajo de esta explicación)

Mark Rajcok es el hombre ... y su respuesta es una respuesta válida, pero ha tenido un defecto (lo siento Mark) ...

... Intente usar el booleano para enfocar la entrada, luego desenfoque la entrada, luego intente usarla para enfocar la entrada nuevamente. No funcionará a menos que restablezca el valor booleano a falso, luego $ digest y luego lo restablezca a verdadero. Incluso si usa una comparación de cadenas en su expresión, se verá obligado a cambiar la cadena a otra cosa, $ digest, y luego volver a cambiarla. (Esto se ha solucionado con el controlador de eventos de desenfoque).

Entonces propongo esta solución alternativa:

Use un evento, la característica olvidada de Angular.

JavaScript ama los eventos después de todo. Los eventos están intrínsecamente acoplados, y aún mejor, evitas agregar otro $ watch a tu $ digest.

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

Así que ahora puedes usarlo así:

<input type="text" focus-on="newItemAdded" />

y luego en cualquier parte de tu aplicación ...

$scope.addNewItem = function () {
    /* stuff here to add a new item... */

    $scope.$broadcast('newItemAdded');
};

Esto es increíble porque puedes hacer todo tipo de cosas con algo como esto. Por un lado, podría relacionarse con eventos que ya existen. Por otra parte, comienzas a hacer algo inteligente al hacer que diferentes partes de tu aplicación publiquen eventos a los que otras partes de tu aplicación pueden suscribirse.

De todos modos, este tipo de cosas me grita "evento impulsado". Creo que, como desarrolladores de Angular, nos esforzamos mucho por convertir las clavijas en forma de visor en agujeros de forma de evento.

¿Es la mejor solución? No se. Es una solucion.

Solución actualizada

Después del comentario de @ ShimonRachlenko a continuación, he cambiado ligeramente mi método de hacerlo. Ahora uso una combinación de un servicio y una directiva que maneja un evento "detrás de escena":

Aparte de eso, es el mismo director descrito anteriormente.

Aquí hay una demostración rápida de Plunk

Uso

<input type="text" focus-on="focusMe"/>

app.controller('MyCtrl', function($scope, focus) {
    focus('focusMe');
});

Fuente

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

app.factory('focus', function ($rootScope, $timeout) {
  return function(name) {
    $timeout(function (){
      $rootScope.$broadcast('focusOn', name);
    });
  }
});

He encontrado que algunas de las otras respuestas son demasiado complicadas cuando todo lo que realmente necesita es esto

app.directive('autoFocus', function($timeout) {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            $timeout(function(){
                _element[0].focus();
            }, 0);
        }
    };
});

el uso es

<input name="theInput" auto-focus>

Usamos el tiempo de espera para dejar que las cosas en el dom se reproduzcan, aunque sea cero, al menos espera eso, de esa manera esto funciona en modales y otras cosas también

HTML tiene un atributo autofocus.

<input type="text" name="fname" autofocus>

http://www.w3schools.com/tags/att_input_autofocus.asp

También puede usar la funcionalidad jqlite integrada en angular.

angular.element('.selector').trigger('focus');

Esto funciona bien y es una forma angular de enfocar el control de entrada

angular.element('#elementId').focus()

Aunque esta no es una forma puramente angular de realizar la tarea, la sintaxis sigue un estilo angular. Jquery desempeña un papel indirecto y accede directamente al DOM usando Angular (jQLite => JQuery Light).

Si es necesario, este código se puede poner fácilmente dentro de una directiva angular simple donde el elemento es directamente accesible.

No creo que $ timeout sea una buena manera de enfocar el elemento en la creación. Aquí hay un método que utiliza la funcionalidad angular incorporada, extraída de las oscuras profundidades de los documentos angulares. Observe cómo el atributo "link" se puede dividir en "pre" y "post", para las funciones pre-link y post-link.

Ejemplo de trabajo: http://plnkr.co/edit/Fj59GB

// this is the directive you add to any element you want to highlight after creation
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink called');
                // this fails since the element hasn't rendered
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink called');
                // this succeeds since the element has been rendered
                element[0].focus();
            }
        }
    }
});

<input value="hello" />
<!-- this input automatically gets focus on creation -->
<input value="world" auto-focus />

Documentos completos de la Directiva AngularJS: https://docs.angularjs.org/api/ng/service/$compile

Aquí está mi solución original:

saqueador

var app = angular.module('plunker', []);
app.directive('autoFocus', function($timeout) {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe("autoFocus", function(newValue){
                if (newValue === "true")
                    $timeout(function(){element[0].focus()});
            });
        }
    };
});

Y el HTML:

<button ng-click="isVisible = !isVisible">Toggle input</button>
<input ng-show="isVisible" auto-focus="{{ isVisible }}" value="auto-focus on" />

Que hace:

Enfoca la entrada a medida que se hace visible con ng-show. No hay uso de $ watch o $ aquí.

He escrito una directiva de enfoque vinculante bidireccional, al igual que el modelo recientemente.

Puede usar la directiva de enfoque de esta manera:

<input focus="someFocusVariable">

Si realiza alguna variable de alcance VariableFocus trueen cualquier parte de su controlador, la entrada se enfocará. Y si desea "desenfocar" su entrada, someFocusVariable se puede establecer en falso. Es como la primera respuesta de Mark Rajcok pero con enlace bidireccional.

Aquí está la directiva:

function Ctrl($scope) {
  $scope.model = "ahaha"
  $scope.someFocusVariable = true; // If you want to focus initially, set this to true. Else you don't need to define this at all.
}

angular.module('experiement', [])
  .directive('focus', function($timeout, $parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          scope.$watch(attrs.focus, function(newValue, oldValue) {
              if (newValue) { element[0].focus(); }
          });
          element.bind("blur", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=false"); 
              }, 0);
          });
          element.bind("focus", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=true");
              }, 0);
          })
      }
    }
  });

Uso:

<div ng-app="experiement">
  <div ng-controller="Ctrl">
    An Input: <input ng-model="model" focus="someFocusVariable">
    <hr>
        <div ng-click="someFocusVariable=true">Focus!</div>  
        <pre>someFocusVariable: {{ someFocusVariable }}</pre>
        <pre>content: {{ model }}</pre>
  </div>
</div>

Aquí está el violín:

http://fiddle.jshell.net/ubenzer/9FSL4/8/

Para aquellos que usan Angular con el complemento Bootstrap:

http://angular-ui.github.io/bootstrap/#/modal

Puede engancharse a la openedpromesa de la instancia modal:

modalInstance.opened.then(function() {
        $timeout(function() {
            angular.element('#title_input').trigger('focus');
        });
    });

modalInstance.result.then(function ( etc...

Me pareció útil usar una expresión general. De esta manera, puede hacer cosas como mover automáticamente el foco cuando el texto de entrada es válido

<button type="button" moo-focus-expression="form.phone.$valid">

O enfocar automáticamente cuando el usuario completa un campo de longitud fija

<button type="submit" moo-focus-expression="smsconfirm.length == 6">

Y, por supuesto, enfocarse después de la carga

<input type="text" moo-focus-expression="true">

El código de la directiva:

.directive('mooFocusExpression', function ($timeout) {
    return {
        restrict: 'A',
        link: {
            post: function postLink(scope, element, attrs) {
                scope.$watch(attrs.mooFocusExpression, function (value) {

                    if (attrs.mooFocusExpression) {
                        if (scope.$eval(attrs.mooFocusExpression)) {
                            $timeout(function () {
                                element[0].focus();
                            }, 100); //need some delay to work with ng-disabled
                        }
                    }
                });
            }
        }
    };
});

No para resucitar a un zombie o conectar mi propia directiva (ok, eso es exactamente lo que estoy haciendo):

https://github.com/hiebj/ng-focus-if

http://plnkr.co/edit/MJS3zRk079Mu72o5A9l6?p=preview

<input focus-if />

(function() {
    'use strict';
    angular
        .module('focus-if', [])
        .directive('focusIf', focusIf);

    function focusIf($timeout) {
        function link($scope, $element, $attrs) {
            var dom = $element[0];
            if ($attrs.focusIf) {
                $scope.$watch($attrs.focusIf, focus);
            } else {
                focus(true);
            }
            function focus(condition) {
                if (condition) {
                    $timeout(function() {
                        dom.focus();
                    }, $scope.$eval($attrs.focusDelay) || 0);
                }
            }
        }
        return {
            restrict: 'A',
            link: link
        };
    }
})();

Primero, una forma oficial de enfocarse es en la hoja de ruta para 1.1 . Mientras tanto, puede escribir una directiva para implementar el enfoque de configuración.

En segundo lugar, establecer el foco en un elemento después de que se haya vuelto visible actualmente requiere una solución alternativa. Simplemente retrase su llamada al elemento focus () con a $timeout.

Debido a que existe el mismo problema controlador-modifica-DOM para el enfoque, desenfoque y selección, propongo tener una ng-targetdirectiva:

<input type="text" x-ng-model="form.color" x-ng-target="form.colorTarget">
<button class="btn" x-ng-click="form.colorTarget.focus()">do focus</button>

Hilo angular aquí: http://goo.gl/ipsx4 , y más detalles publicados aquí: http://goo.gl/4rdZa

La siguiente directiva creará una .focus()función dentro de su controlador según lo especificado por su ng-targetatributo. (Crea una .blur()y una .select()también.) Demostración: http://jsfiddle.net/bseib/WUcQX/

En lugar de crear su propia directiva, es posible simplemente usar las funciones de JavaScript para lograr un enfoque.

Aquí hay un ejemplo.

En el archivo html:

<input type="text" id="myInputId" />

En un archivo javascript, en un controlador, por ejemplo, donde desea activar el foco:

document.getElementById("myInputId").focus();

Si solo deseaba un enfoque simple que fuera controlado por un clic ng.

HTML:

<input ut-focus="focusTigger">

<button ng-click="focusTrigger=!focusTrigger" ng-init="focusTrigger=false"></button>

Directiva:

'use strict'

angular.module('focus',['ng'])
.directive('utFocus',function($timeout){
    return {
        link:function(scope,elem,attr){
            var focusTarget = attr['utFocus'];
            scope.$watch(focusTarget,function(value){
                $timeout(function(){
                    elem[0].focus();
                });
            });
        }
    }
});

Una simple que funciona bien con modales:

.directive('focusMeNow', ['$timeout', function ($timeout)
{
    return {
        restrict: 'A',

        link: function (scope, element, attrs)
        {


            $timeout(function ()
            {
                element[0].focus();
            });



        }
    };
}])

Ejemplo

<input ng-model="your.value" focus-me-now />

Simplemente podría crear una directiva que obligue a centrarse en el elemento decorado en postLinking:

angular.module('directives')
.directive('autoFocus', function() {
    return {
        restrict: 'AC',
        link: function(_scope, _element) {
            _element[0].focus();
        }
    };
});

Luego en tu html:

<input type="text" name="first" auto-focus/> <!-- this will get the focus -->
<input type="text" name="second"/>

Esto funcionaría para modals y ng-if elementos alternados, no para ng-show ya que postLinking ocurre solo en el procesamiento HTML.

Mark y Blesh tienen excelentes respuestas; sin embargo, Mark's tiene una falla que señala Blesh (además de ser compleja de implementar), y siento que la respuesta de Blesh tiene un error semántico al crear un servicio que se trata específicamente de enviar una solicitud de enfoque a la interfaz cuando realmente todo lo que necesitaba era una forma de retrasar el evento hasta que todas las directivas estuvieran escuchando.

Así que esto es lo que terminé haciendo, que roba mucho de la respuesta de Blesh, pero mantiene la semántica del evento del controlador y el servicio "después de la carga" por separado.

Esto permite que el evento del controlador se enganche fácilmente para otras cosas que no sean solo enfocar un elemento específico y también permite incurrir en la sobrecarga de la funcionalidad "después de la carga" solo si es necesario, lo que puede no serlo en muchos casos.

Uso

<input type="text" focus-on="controllerEvent"/>

app.controller('MyCtrl', function($scope, afterLoad) {
  function notifyControllerEvent() {
      $scope.$broadcast('controllerEvent');
  }

  afterLoad(notifyControllerEvent);
});

Fuente

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

app.factory('afterLoad', function ($rootScope, $timeout) {
  return function(func) {
    $timeout(func);
  }
});

Esto también es posible de usar ngModelController. Trabajando con 1.6+ (no lo sé con versiones anteriores).

HTML

<form name="myForm">
    <input type="text" name="myText" ng-model="myText">
</form>

JS

$scope.myForm.myText.$$element.focus();

-

NB: Dependiendo del contexto, es posible que deba ajustar una función de tiempo de espera.

NB²: cuando se usa controllerAs, esto es casi lo mismo. Basta con sustituir name="myForm"con name="vm.myForm"y en JS, vm.myForm.myText.$$element.focus();.

Probablemente, la solución más simple en la era ES6.

Agregar la siguiente directiva de línea hace que el atributo HTML 'autofocus' sea efectivo en Angular.js.

.directive('autofocus', ($timeout) => ({link: (_, e) => $timeout(() => e[0].focus())}))

Ahora, puede usar la sintaxis de enfoque automático HTML5 como:

<input type="text" autofocus>

Solo soy un novato aquí, pero pude hacerlo funcionar en un ui.bootstrap.modal con esta directiva:

directives.directive('focus', function($timeout) {
    return {
        link : function(scope, element) {
            scope.$watch('idToFocus', function(value) {
                if (value === element[0].id) {
                    $timeout(function() {
                        element[0].focus();
                    });
                }
            });
        }
    };
});

y en el método $ modal.open utilicé lo siguiente para indicar el elemento donde se debe poner el foco:

var d = $modal.open({
        controller : function($scope, $modalInstance) {
            ...
            $scope.idToFocus = "cancelaAteste";
    }
        ...
    });

en la plantilla tengo esto:

<input id="myInputId" focus />

La siguiente directiva me sirvió. Utilice el mismo atributo html de enfoque automático para la entrada.

.directive('autofocus', [function () {
    return {
        require : 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.focus();
        }
    };
}])

Si está usando modalInstance y tiene el objeto, puede usar "entonces" para realizar acciones después de abrir el modal. Si no está usando modalInstance y está codificado para abrir el modal, puede usar el evento. El $ timeout no es una buena solución.

Puedes hacer (Bootstrap3):

$("#" + modalId).on("shown.bs.modal", function() {
    angular.element("[name='name']").focus();
});

En modalInstance puede mirar la biblioteca para ver cómo ejecutar el código después de abrir modal.

No use $ timeout de esta manera, el $ timeout puede ser 0, 1, 10, 30, 50, 200 o más, esto dependerá de la computadora del cliente y del proceso para abrir modal.

No uses $ timeout, deja que el método te diga cuándo puedes concentrarte;)

Espero que esto ayude! :)

Toda la respuesta anterior no funciona si el elemento de enfoque deseado se inyecta en una plantilla directiva. La siguiente directiva se ajusta tanto al elemento simple como al elemento inyectado por la directiva (lo escribí en mecanografiado ). acepta selector para elemento enfocable interno. si solo necesita enfocar el elemento self, no envíe ningún parámetro selector a la directiva:

module APP.Directives {

export class FocusOnLoadDirective implements ng.IDirective {
    priority = 0;
    restrict = 'A';

    constructor(private $interval:any, private $timeout:any) {

    }

    link = (scope:ng.IScope, element:JQuery, attrs:any) => {
        var _self = this;
        var intervalId:number = 0;


        var clearInterval = function () {
            if (intervalId != 0) {
                _self.$interval.cancel(intervalId);
                intervalId = 0;
            }
        };

        _self.$timeout(function(){

                intervalId = _self.$interval(function () {
                    let focusableElement = null;
                    if (attrs.focusOnLoad != '') {
                        focusableElement = element.find(attrs.focusOnLoad);
                    }
                    else {
                        focusableElement = element;
                    }
                    console.debug('focusOnLoad directive: trying to focus');
                    focusableElement.focus();
                    if (document.activeElement === focusableElement[0]) {
                        clearInterval();
                    }
                }, 100);

                scope.$on('$destroy', function () {
                    // Make sure that the interval is destroyed too
                    clearInterval();
                });

        });
    };

    public static factory = ():ng.IDirectiveFactory => {
        let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout);
        directive.$inject = ['$interval', '$timeout'];
        return directive;
    };
}

angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory());

}

ejemplo de uso para elemento simple:

<button tabindex="0" focus-on-load />

ejemplo de uso para el elemento interno (generalmente para el elemento inyectado dinámico como la directiva con plantilla):

<my-directive focus-on-load="input" />

puede usar cualquier selector jQuery en lugar de "input"

Edito la directiva focusMe de Mark Rajcok para trabajar para el enfoque múltiple en un elemento.

HTML:

<input  focus-me="myInputFocus"  type="text">

en el controlador AngularJs:

$scope.myInputFocus= true;

Directiva AngulaJS:

app.directive('focusMe', function ($timeout, $parse) {
    return {
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        scope.$apply(model.assign(scope, false));
                        element[0].focus();
                    }, 30);
                }
            });
        }
    };
});

Quiero contribuir a esta discusión después de buscar una mejor solución y no encontrarla, teniendo que crearla en su lugar.

Criterios: 1. La solución debe ser independiente del alcance del controlador principal para aumentar la reutilización. 2. Evite el uso de $ watch para monitorear alguna condición, esto es lento, aumenta el tamaño del bucle de digestión y dificulta las pruebas. 3. Evite $ timeout o $ scope. $ Apply () para activar un bucle de resumen. 4. Un elemento de entrada está presente dentro del elemento donde se utiliza la Directiva abierta.

Esta es la solución que más me gustó:

Directiva:

.directive('focusInput', [ function () {
    return {
        scope: {},
        restrict: 'A',
        compile: function(elem, attr) {
            elem.bind('click', function() {
                elem.find('input').focus();                
            });
        }        
    };
}]);

HTML:

 <div focus-input>
     <input/>
 </div>

¡Espero que esto ayude a alguien por ahí!

Es fácil ... prueba esto

html

<select id="ddl00">  
 <option>"test 01"</option>  
</select>

javascript

document.getElementById("ddl00").focus();

Si desea establecer el foco en un elemento en particular, puede usar el siguiente enfoque.

1. Crea un servicio llamado focus.

   angular.module('application')
   .factory('focus', function ($timeout, $window) {
       return function (id) {
           $timeout(function () {
               var element = $window.document.getElementById(id);
               if (element)
                   element.focus();
           });
       };
   });

2. Inyecte en el controlador desde donde desea llamar.

3. Llama a este servicio.

Creo que la directiva es innecesaria. Use la identificación HTML y los atributos de clase para seleccionar el elemento requerido y haga que el servicio use document.getElementById o document.querySelector para aplicar el foco (o equivalentes jQuery).

El marcado es directivas HTML / angulares estándar con id / clases agregadas para la selección

<input id="myInput" type="text" ng-model="myInputModel" />

Controlador difunde evento

$scope.$emit('ui:focus', '#myInput');

En la interfaz de usuario, el servicio utiliza querySelector: si hay varias coincidencias (por ejemplo, debido a la clase), solo devolverá la primera

$rootScope.$on('ui:focus', function($event, selector){
  var elem = document.querySelector(selector);
  if (elem) {
    elem.focus();
  }
});

Es posible que desee usar $ timeout () para forzar un ciclo de resumen

Solo tirando un poco de café.

app.directive 'ngAltFocus', ->
    restrict: 'A'
    scope: ngAltFocus: '='
    link: (scope, el, attrs) ->
        scope.$watch 'ngAltFocus', (nv) -> el[0].focus() if nv