1. Write in front
Regarding how to get the focus of input boxes, textarea, etc., there are many articles on the Internet that will only tell you about the built-in command ng-focus. Answers like this can only explain the author and truly understand people's needs. ng-focus is an event, which is the same as the onfocus of native JS (JavaScript). When we click on the input box, the event will be triggered, and in this event we can call a function. Therefore, when people ask you how to get the focus, they generally mean that if I perform some operations, how can I get the focus automatically without clicking the mouse, the key of the question is "automatic".
Because AngularJS does not have the function of directly obtaining elements through document.getElementById("idVlaue") like native JS, it can only be achieved by means of custom directives, so to achieve this, we must also have the basis of angularjs custom directives. Reference: http://blog.csdn.net/zcl_love_wx/article/details/51331539
2. Code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-app="myApp" ng-controller="control">
<input type="text" set-Focus ng-blur="setBlur()">
<button ng-click="getFocus()">Grandpa, I am going to get the banana fan</button>
</div>
<script src="jquery-1.8.3.js"></script>
<script src="angular1.2.9.js"></script>
<script type="text/javascript">
//Model
var app = angular.module ('myApp', []);
//controller
app.controller("control",function($scope){
$scope.isCome = false; //Judge whether the Great Sage is here
$scope.isFocus = false; //Determine whether to take the banana fan
$scope.getFocus = function(){
$scope.isFocus = true; //The Great Sage is here
$scope.isCome = true; //To get the banana fan
};
$scope.setBlur = function(){
$scope.isFocus = false;//No one is coming to pick up the banana fan
}
});
//custom command
app.directive('setFocus',[ function(){
return {
scope:false,
link:function(scope, element){
scope.$watch("isFocus",function(newValue,oldValue, scope) {
//The great sage is here, and he wants to get the banana fan
if(newValue && scope.isCome){
element[0].focus(); //Get the focus
alert("Monkey Brother")
}
}, true);;
}
};
}]);
</script>
</html>
3. Code Description
By default, readers of this article have a certain basic grammar for angualrJS. What are the highlights of this article? The highlight is to implement the logic to get the focus. angularjs documentation will only tell you to get focus with custom directive like code:
<body>
<div ng-app="myApp" >
<input type="text" set-Focus>
</div>
<script type="text/javascript">
var app = angular.module ('myApp', []);
app.directive('setFocus', function(){
return function(scope, element){
element[0].focus();
};
});
</script>
</body>
This piece of code, in addition to entering the page to get the focus, what else can it do? You can also tell beginners that, dear, you can directly return a function in the custom command.
Formally, how do I achieve focus after performing some operations:
First of all, it is not necessary to say that custom instructions will be used, but do you still know that there is an attribute called scope in customization? The article in the link I provided stated that it has two value types, boolean and object.
Since we need to obtain the focus after performing an operation, we need to be able to operate the custom command and the variables in the controller at the same time, such as isCome and isFocus in the first example.
And in the scope description it says:
The scope value is false (default): use the parent scope as its own scope.
When true: Create a new scope that inherits the parent scope.
So by default, we can directly manipulate the variables in the controller in the custom instruction. So I used the monitoring $watch again, what the hell is this? A small article will be written to explain it later. As long as the changed result meets the requirements for getting the focus, we execute element[0].focus(); to get the focus.
Article source: http://blog.csdn.net/zcl_love_wx/article/details/51382197