Input autofocus attribute

by

Update: AngularJS now has an ngFocus directive that evaluates an expression on focus, but I mention it here for the sake of completeness.

The current version of AngularJS doesn’t have a focus directive, but it’s in the roadmap. Coincidentally, we were talking about this on the mailing list yesterday, and I came up with this:

angular.module('ng').directive('ngFocus', function($timeout) {
    return {
        link: function ( scope, element, attrs ) {
            scope.$watch( attrs.ngFocus, function ( val ) {
                if ( angular.isDefined( val ) && val ) {
                    $timeout( function () { element[0].focus(); } );
                }
            }, true);

            element.bind('blur', function () {
                if ( angular.isDefined( attrs.ngFocusLost ) ) {
                    scope.$apply( attrs.ngFocusLost );

                }
            });
        }
    };
});

Which works off a scope variable as you requested:

<input type="text" ng-focus="isFocused" ng-focus-lost="loseFocus()">

Here’s a fiddle: http://jsfiddle.net/ANfJZ/39/

More Related Contents:

  1. The Advantages when we put AngularJS within Symfony web application
  2. AngularJS: Service vs provider vs factory
  3. Why does AngularJS include an empty option in select?
  4. AngularJS access parent scope from child controller
  5. How to Display blob (.pdf) in an AngularJS app
  6. How to execute AngularJS controller function on page load?
  7. AngularJS: How to make angular load script inside ng-include?
  8. Injecting $scope into an angular service function()
  9. Angular $scope.$apply vs $timeout as a safe $apply
  10. How do I fix the npm UNMET PEER DEPENDENCY warning?
  11. Preserve line breaks in angularjs
  12. Getting an error when using ng-controller in angularjs ver 1.3.0 [duplicate]
  13. Dynamically set the value of ui-sref Angularjs
  14. disable nganimate for some elements
  15. AngularJS dependency injection of value inside of module.config
  16. How to access/update $rootScope from outside Angular
  17. How to specify headers parameter for custom Angular $resource action
  18. How to modify scope from within a directive in AngularJs
  19. How to check internet connection in AngularJs
  20. Filter results 6 through 10 of 100 with ng-repeat in AngularJS
  21. Angular JS – Automatically focus input and show typeahead dropdown – ui.bootstrap.typeahead
  22. Angular clear subform data and reset validation
  23. What is `priority` of ng-repeat directive can you change it?
  24. Track to see when a view changes in angularjs
  25. How to use `replace` of directive definition?
  26. ng-repeat specify a starting index
  27. how to make synchronous http request in angular js
  28. How to detect if a user clicks browser back button in Angularjs
  29. how do I get ng-include directive to work with a Content Delivery Network?
  30. Inject module dynamically, only if required

Leave a Comment