CODEWITHSUNDEEP
angularjsangularjs-directive
MarcoS
MarcoS

Reputation: 17711

Angular autofocus directive doesn't work

I have a simple directive to give focus on an specific input field of form.
It just fails: element is not focused. This is the directive code:

angular.module('myApp').directive('autoFocus', function($timeout) {
  return {
    scope : {
      trigger: '@autoFocus'
    },
    link: function(scope, element) {
      scope.$watch('trigger', function(value) {
        if (value === 'true') {
          $timeout(function() {
            console.log('giving focus to element', element[0].id);
            element[0].focus();
          });
        }
      });
    }
  };
});

And this is the markup:

<form ng-show="signedIn()" class="service form-horizontal">

  ....

  <div class="row" title="Author">
    <div class="col-xs-8>
      <div class="input-group">
        <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
        <input type="text" class="form-control" ng-model="service.author" auto-focus="true" placeholder="" ng-disabled="servicePrintMode" />
      </div>
    </div>
  </div>

  ....

</form>

Any idea of the reason why it doesn't work?
I'd even accept a workaround... :-)

UPDATE:
This is the jsfiddle: on Chrome it works like a charm, on Firefox (30.0) it does not... :-(

Upvotes: 1

Views: 2623

Answers (1)

sylwester
sylwester

Reputation: 16498

   angular.module('myApp').directive('autoFocus', function ($timeout) {
        return {
            scope: {
                trigger: '@autoFocus'
            },
            link: function (scope, element) {
                scope.$watch('trigger', function (value) {
                    console.log('focus to element ' + element[0].id + " " +value );
                    if (value == 'true') {
                        $timeout(function () {
                            console.log('giving focus to element', element[0].id);
                            element[0].focus();
                        });
                    }
                });
            }
        };
    });

Upvotes: 1

Related Questions