Angular ng-focus Directive Set Focus on Textbox

Today, We want to share with you Angular ng-focus Directive Set Focus on Textbox.
In this post we will show you AngularJs Set Focus on Input Field Example, hear for angular set focus on input field we will give you demo and example for implement.
In this post, we will learn about Automatically Set Focus on a Textbox (Input Box) in AngularJS with an example.

ngFocus : Example – Set Focus [input, select, textarea, a,etc…]

AngularJs Set Focus on Input Field

It is a Specify custom behavior on focus event.Like (input, select, textarea, a,etc..)

Directive:

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

html code

[php]

Focus
[/php]

controller

[php]
$scope.focusOnSaveInput();
[/php]

Angular Set Focus on Input Field

html code

[php]
Your Good Name:

---

Solution of AngularJs All Problems For infinityknow.com

My First Web-Application in angularjs, So I am very happy and 1000+ more then people are used of infinityknow.com

[/php]

Directive:

[php]
app.directive(‘focusMe’, function($timeout, $parse) {
return {
//scope: true or false,
// simple optionally create a new child scope in angular
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
if(value === true) {
$timeout(function() {
element[0].focus();
});
}
});
// simple on blur event in agularjs:
element.bind(‘blur’, function() {
scope.$apply(model.assign(scope, false));
});
}
};
});
[/php]

Angular js auto focus for input box

[php]

script

// simple Common directive used to for Focus

angular.module(‘infinityknowApp’).directive(‘focus’,
function($timeout) {
return {
scope : {
trigger : ‘@focus’
},
link : function(scope, element) {
scope.$watch(‘trigger’, function(value) {
if (value === “true”) {
$timeout(function() {
element[0].focus();
});
}
});
}
};
});
[/php]

Here is a working example:

Set-focus – Example

Set-focus – Example – 2