Set element focus in angular way

Question

After looking for examples of how set focus elements with angular  I saw that most of them use some variable to watch for then set focus  and most of them use one different variable for each field they want to set focus  In a form  with a lot of fields  that implies in a lot of different variables   With jquery way in mind  but wanting to do that in angular way  I made a solution that we set focus in any function using the element s id  so  as I am very new in angular  I d like to get some opinions if that way is right  have problems  whatever  anything that could help me do this the better way in angular   Basically  I create a directive that watch a scope value defined by the user with directive  or the default s focusElement  and when that value is the same as the element s id  that element set focus itself   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                                              An input that needs to get focus by some reason  will do this way   lt input my-focus id  input1  type  text    gt    Here any element to set focus    lt a href    ng-click  clickButton     gt Set focus lt  a gt    And the example function that set focus    scope clickButton   function          scope focusElement    input1       Is that a good solution in angular  Does it have problems that with my poor experience I don t see yet

User · Answer

You can try  angular element    lt elementId gt    focus      for eg   angular element   txtUserId   focus      its working for me

User · Answer

Another option would be to use Angular s built-in pub-sub architecture in order to notify your directive to focus  Similar to the other approaches  but it s then not directly tied to a property  and is instead listening in on it s scope for a particular key   Directive   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    lt input type  text  name  text input  ng-model  ctrl model  focus-on  focusTextInput    gt    Controller     Assume this is within your controller   And you ve hit the point where you want to focus the input   scope  broadcast  focusTextInput

User · Answer

I like to avoid DOM lookups  watches  and global emitters whenever possible  so I use a more direct approach   Use a directive to assign a simple function that focuses on the directive element   Then call that function wherever needed within the scope of the controller   Here s a simplified approach for attaching it to scope   See the full snippet for handling controller-as syntax   Directive   app directive  inputFocusFunction   function           use strict       return           restrict   A           link  function  scope  element  attr                scope attr inputFocusFunction    function                      element 0  focus                                          and in html    lt input input-focus-function  focusOnSaveInput  ng-model  saveName  gt   lt button ng-click  focusOnSaveInput    gt Focus lt  button gt    or in the controller    scope focusOnSaveInput       x000D   x000D  angular module  app       x000D     directive  inputFocusFunction   function     x000D       use strict   x000D      return   x000D        restrict   A   x000D        link  function scope  element  attr    x000D             Parse the attribute to accomodate assignment to an object x000D          var parseObj   attr inputFocusFunction split       x000D          var attachTo   scope  x000D          for  var i   0  i  lt  parseObj length - 1  i      x000D            attachTo   attachTo parseObj i    x000D            x000D             assign it to a function that focuses on the decorated element x000D          attachTo parseObj parseObj length - 1     function     x000D            element 0  focus    x000D             x000D          x000D         x000D       x000D     controller  main   function        x000D   lt script src  https   ajax googleapis com ajax libs angularjs 1 4 3 angular min js  gt  lt  script gt  x000D   x000D   lt body ng-app  app  ng-controller  main as vm  gt  x000D     lt input input-focus-function  vm focusOnSaveInput  ng-model  saveName  gt  x000D     lt button ng-click  vm focusOnSaveInput    gt Focus lt  button gt  x000D   lt  body gt  x000D   x000D   x000D    Edited to provide more explanation about the reason for this approach and to extend the code snippet for controller-as use

User · Answer

About this solution  we could just create a directive and attach it to the DOM element that has to get the focus when a given condition is satisfied  By following this approach we avoid coupling controller to DOM element ID s   Sample code directive   gbndirectives directive  focusOnCondition      timeout       function   timeout            var checkDirectivePrerequisites   function  attrs              if   attrs focusOnCondition  amp  amp  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                                                                                                               A possible usage   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   lt input focus-on-condition  myCondition  gt

User · Answer

The problem with your solution is that it does not work well when tied down to other directives that creates a new scope  e g  ng-repeat  A better solution would be to simply create a service function that enables you to focus elements imperatively within your controllers or to focus elements declaratively in the html   DEMO  JAVASCRIPT  Service    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                             Directive     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                            Controller   controller  Ctrl   function  scope  focus         scope doSomething   function              do something awesome       focus  email                   HTML   lt input type  email  id  email  class  form-control  gt   lt button event-focus  click  event-focus-id  email  gt Declarative Focus lt  button gt   lt button ng-click  doSomething    gt Imperative Focus lt  button gt

User · Answer

I prefered to use an expression  This lets me do stuff like focus on a button when a field is valid  reaches a certain length  and of course after load      lt button type  button  moo-focus-expression  form phone  valid  gt   lt button type  submit  moo-focus-expression  smsconfirm length    6  gt   lt input type  text  moo-focus-expression  true  gt    On a complex form this also reduces need to create additional scope variables for the purposes of focusing   See https   stackoverflow com a 29963695 937997

[angularjs] Set element focus in angular way

Examples related to angularjs

Examples related to focus

Examples related to setfocus