examples - ng-show angularjs

Establecer el foco en un campo de entrada después de ng-show

Question

¿Es posible establecer el enfoque de un campo de entrada a través de un controlador una vez que los datos se hayan cargado (a través de $ resource en este caso)?

La entrada se oculta a través de ng-show hasta que los datos se devuelven desde la API, pero no puedo encontrar una manera de establecer el enfoque en la entrada. Conozco el nombre ng-model de la entrada y el nombre de la entrada, lo que significa que podría hacerlo a través de jQuery, pero prefiero hacerlo si es posible a la manera de AngularJS.

He intentado muchos ejemplos de directivas aquí, pero todos parecen estar enfocados antes de 1.2 ng, dependen primero de un clic en un botón (no puede ocurrir en mi caso) o simplemente no funcionan.
Cualquier consejo muy agradecido recibido.

Answer 1

Esta es una directiva simple que podría funcionar para usted

<input focus-on="!!myResourceData" />

.directive(''focusOn'',function($timeout) {
    return {
        restrict : ''A'',
        link : function($scope,$element,$attr) {
            $scope.$watch($attr.focusOn,function(_focusVal) {
                $timeout(function() {
                    _focusVal ? $element[0].focus() :
                        $element[0].blur();
                });
            });
        }
    }
})

Answer 2

He extendido la respuesta para trabajar con angular''s ng-show y ng-hide

app.directive(''focusOnShow'', function($timeout) {
    return {
        restrict: ''A'',
        link: function($scope, $element, $attr) {
            if ($attr.ngShow){
                $scope.$watch($attr.ngShow, function(newValue){
                    if(newValue){
                        $timeout(function(){
                            $element[0].focus();
                        }, 0);
                    }
                })      
            }
            if ($attr.ngHide){
                $scope.$watch($attr.ngHide, function(newValue){
                    if(!newValue){
                        $timeout(function(){
                            $element[0].focus();
                        }, 0);
                    }
                })      
            }

        }
    };
})

Todo lo que necesitas es agregar el atributo focus-on-show

<input type="text" ng-show="editing" focus-on-show />

Answer 3

Sobre la base de la respuesta de koolunix, si solo busca enfocar elementos de entrada, también puede ser útil encontrar el primer elemento de entrada que es un elemento secundario del elemento con la directiva de enfoque en.

Esto es útil en el caso de una biblioteca externa que abstrae el elemento de entrada con directivas y plantillas.

.directive(''focusOn'', function ($timeout) {
    return {
        restrict: ''A'',
        priority: -100,
        link: function ($scope, $element, $attr) {

            $scope.$watch($attr.focusOn,
                function (_focusVal) {
                    $timeout( function () {
                        var inputElement = $element.is(''input'')
                            ? $element
                            : $element.find(''input'');

                         _focusVal ? inputElement.focus()
                                   : inputElement.blur();
                    });
                }
            );

        }
    };
});

Answer 4

tiene que usar un tiempo de espera en su controlador porque debe procesarse antes de que aquí haya un ejemplo similar con un cuadro de búsqueda que está oculto por defecto

HTML:

<input ng-show="vm.isActive" id="searchInputBox" ></input>
<input type="button" ng-click="vm.toggleActiveInactive();">

Controlador:

vm.isActive=false;
vm.toggleActiveInactive=toggleActiveInactive; // vm= viewmodel

function toggleActiveInactive() {
          if(vm.isActive==true){
            vm.isActive=false;
          }else{
            vm.isActive=true;

            $timeout(function(){     
              document.getElementById(''searchBoxInput'').focus()
            }, 10 );

          }
        }