Defina o foco do elemento de maneira angular

Depois de procurar exemplos de como definir elementos de foco com angular, vi que a maioria deles usa alguma variável para observar e definir o foco, e a maioria deles usa uma variável diferente para cada campo em que deseja definir o foco. Em um formulário, com muitos campos, isso implica em muitas variáveis ​​diferentes.

Com o jquery way em mente, mas querendo fazer isso de forma angular, fiz uma solução que colocamos o foco em qualquer função usando o id do elemento, então, como sou muito novo em angular, gostaria de obter algumas opiniões se desse jeito é certo, tenho problemas, enfim, qualquer coisa que pudesse me ajudar a fazer isso da melhor forma no angular.

Basicamente, eu crio uma diretiva que observa um valor de escopo definido pelo usuário com a diretiva, ou o focusElement padrão, e quando esse valor é o mesmo que o id do elemento, esse elemento define o próprio foco.

angular.module('appnamehere')
  .directive('myFocus', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attrs) {
        if (attrs.myFocus == "") {
          attrs.myFocus = "focusElement";
        }
        scope.$watch(attrs.myFocus, function(value) {
          if(value == attrs.id) {
            element[0].focus();
          }
        });
        element.on("blur", function() {
          scope[attrs.myFocus] = "";
          scope.$apply();
        })        
      }
    };
  });

Uma entrada que precisa de foco por algum motivo, fará desta forma

<input my-focus id="input1" type="text" />

Aqui, qualquer elemento para definir o foco:

<a href="" ng-click="clickButton()" >Set focus</a>

E a função de exemplo que define o foco:

$scope.clickButton = function() {
    $scope.focusElement = "input1";
}

Essa é uma boa solução em angular? Ele tem problemas que eu ainda não vejo com minha experiência ruim?

O problema com sua solução é que ela não funciona bem quando ligada a outras diretivas que criam um novo escopo, por exemplo ng-repeat. Uma solução melhor seria simplesmente criar uma função de serviço que permita focar elementos de forma imperativa dentro de seus controladores ou focar elementos declarativamente no html.

DEMO

JAVASCRIPT

Serviço

 .factory('focus', function($timeout, $window) {
    return function(id) {
      // timeout makes sure that it is invoked after any other event has been triggered.
      // e.g. click events that need to run before the focus or
      // inputs elements that are in a disabled state but are enabled when those events
      // are triggered.
      $timeout(function() {
        var element = $window.document.getElementById(id);
        if(element)
          element.focus();
      });
    };
  });

Diretriz

  .directive('eventFocus', function(focus) {
    return function(scope, elem, attr) {
      elem.on(attr.eventFocus, function() {
        focus(attr.eventFocusId);
      });

      // Removes bound events in the element itself
      // when the scope is destroyed
      scope.$on('$destroy', function() {
        elem.off(attr.eventFocus);
      });
    };
  });

Controlador

.controller('Ctrl', function($scope, focus) {
    $scope.doSomething = function() {
      // do something awesome
      focus('email');
    };
  });

HTML

<input type="email" id="email" class="form-control">
<button event-focus="click" event-focus-id="email">Declarative Focus</button>
<button ng-click="doSomething()">Imperative Focus</button>

Sobre esta solução, poderíamos apenas criar uma diretiva e anexá-la ao elemento DOM que deve obter o foco quando uma determinada condição for satisfeita. Seguindo essa abordagem, evitamos acoplar o controlador aos IDs do elemento DOM.

Diretiva de código de amostra:

gbndirectives.directive('focusOnCondition', ['$timeout',
    function ($timeout) {
        var checkDirectivePrerequisites = function (attrs) {
          if (!attrs.focusOnCondition && attrs.focusOnCondition != "") {
                throw "FocusOnCondition missing attribute to evaluate";
          }
        }

        return {            
            restrict: "A",
            link: function (scope, element, attrs, ctrls) {
                checkDirectivePrerequisites(attrs);

                scope.$watch(attrs.focusOnCondition, function (currentValue, lastValue) {
                    if(currentValue == true) {
                        $timeout(function () {                                                
                            element.focus();
                        });
                    }
                });
            }
        };
    }
]);

Um uso possível

.controller('Ctrl', function($scope) {
   $scope.myCondition = false;
   // you can just add this to a radiobutton click value
   // or just watch for a value to change...
   $scope.doSomething = function(newMyConditionValue) {
       // do something awesome
       $scope.myCondition = newMyConditionValue;
  };

});

HTML

<input focus-on-condition="myCondition">

Gosto de evitar pesquisas DOM, relógios e emissores globais sempre que possível, então uso uma abordagem mais direta. Use uma diretiva para atribuir uma função simples que se concentra no elemento de diretiva. Em seguida, chame essa função sempre que necessário dentro do escopo do controlador.

Aqui está uma abordagem simplificada para anexá-lo ao escopo. Veja o snippet completo para lidar com a sintaxe do controlador como.

Diretriz:

app.directive('inputFocusFunction', function () {
    'use strict';
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            scope[attr.inputFocusFunction] = function () {
                element[0].focus();
            };
        }
    };
});

e em html:

<input input-focus-function="focusOnSaveInput" ng-model="saveName">
<button ng-click="focusOnSaveInput()">Focus</button>

ou no controlador:

$scope.focusOnSaveInput();

angular.module('app', [])
  .directive('inputFocusFunction', function() {
    'use strict';
    return {
      restrict: 'A',
      link: function(scope, element, attr) {
        // Parse the attribute to accomodate assignment to an object
        var parseObj = attr.inputFocusFunction.split('.');
        var attachTo = scope;
        for (var i = 0; i < parseObj.length - 1; i++) {
          attachTo = attachTo[parseObj[i]];
        }
        // assign it to a function that focuses on the decorated element
        attachTo[parseObj[parseObj.length - 1]] = function() {
          element[0].focus();
        };
      }
    };
  })
  .controller('main', function() {});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>

<body ng-app="app" ng-controller="main as vm">
  <input input-focus-function="vm.focusOnSaveInput" ng-model="saveName">
  <button ng-click="vm.focusOnSaveInput()">Focus</button>
</body>

Editado para fornecer mais explicações sobre o motivo dessa abordagem e para estender o trecho de código para uso pelo controlador.

Podes tentar

angular.element('#<elementId>').focus();

por exemplo.

angular.element('#txtUserId').focus();

está funcionando para mim.

Outra opção seria usar a arquitetura pub-sub integrada do Angular para notificar sua diretiva ao foco. Semelhante às outras abordagens, mas não está diretamente vinculado a uma propriedade e, em vez disso, está ouvindo seu escopo para uma chave específica.

Diretriz:

angular.module("app").directive("focusOn", function($timeout) {
  return {
    restrict: "A",
    link: function(scope, element, attrs) {
      scope.$on(attrs.focusOn, function(e) {
        $timeout((function() {
          element[0].focus();
        }), 10);
      });
    }
  };
});

HTML:

<input type="text" name="text_input" ng-model="ctrl.model" focus-on="focusTextInput" />

Controlador:

//Assume this is within your controller
//And you've hit the point where you want to focus the input:
$scope.$broadcast("focusTextInput");

Eu preferi usar uma expressão. Isso me permite fazer coisas como focar em um botão quando um campo é válido, atinge um determinado comprimento e, claro, após o carregamento.

<button type="button" moo-focus-expression="form.phone.$valid">
<button type="submit" moo-focus-expression="smsconfirm.length == 6">
<input type="text" moo-focus-expression="true">

Em um formulário complexo, isso também reduz a necessidade de criar variáveis ​​de escopo adicionais para fins de foco.

Veja https://stackoverflow.com/a/29963695/937997