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

1. Cuando se abre un modal, establezca el foco en una <entrada> predefinida dentro de este modal.

Defina una directiva y haga que $watch 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));
            });
        }
    };
}]);

plomero

El $timeout parece ser necesario para darle tiempo al modal para renderizarse.

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

Cree una directiva esencialmente como la anterior. Observe alguna propiedad de alcance y, cuando se convierta en verdadera (configúrela en su controlador ng-click), ejecútela element[0].focus(). Dependiendo de su caso de uso, es posible que necesite o no un $timeout 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;
          //});
        }
      });
    }
  };
});

plomero

Actualización 7/2013 : He visto a algunas personas usar mis directivas de alcance aislado originales y luego tener 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 secundario) debería aliviar algo del dolor. Entonces, arriba actualicé la respuesta para no usar ámbitos aislados. A continuación se muestra la respuesta original:

Respuesta original para 1., utilizando 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., utilizando 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 .

Dado que 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 usamos '@' comparamos el valor de activación con "verdadero", ya que @ siempre da como resultado una cadena.

Feb 12 '2013 16:02 Mark Rajcok