深究AngularJS—如何获取input的焦点（自定义指令）

程序员文章站 2024-02-10 14:26:10

...

一.写在前面

　　关于如何获取input框、textarea等的焦点，网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答，只能说明作者并为真正理解人家的需求。ng-focus是一个事件，跟原生JS（JavaScript）的onfocus是一样的，当我们点击input框时，就会触发该事件，而在该事件里我们可以调用一个函数。所以，当人家问你如何获取焦点时一般的意思是，如果我进行了某些操作后，不用鼠标点击是如何自动获取焦点，问题的关键是“自动”。

　　因为AngularJS没有像原生JS那样可通document.getElementById("idVlaue")直接获取元素的功能，所以只能通过自定义指令的方式实现，所以需要实现这个，我们还得有angularjs自定义指令的基础。可参考：http://blog.csdn.net/zcl_love_wx/article/details/51331539

二.代码示例

<!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()">孙爷爷我要去取芭蕉扇了</button>
    </div>
<script src="jquery-1.8.3.js"></script> 
<script src="angular1.2.9.js"></script>	
<script type="text/javascript">     
    //模型
    var app = angular.module('myApp',[]);

    //控制器
    app.controller("control",function($scope){
        $scope.isCome = false;     //判断大圣来了没
        $scope.isFocus = false;        //判断是不是要取芭蕉扇

        $scope.getFocus = function(){
            $scope.isFocus = true; //大圣来了
            $scope.isCome = true;  //要取芭蕉扇
        };

        $scope.setBlur = function(){
            $scope.isFocus = false;//没人要来取芭蕉扇了
        }
    });

    //自定义指令
     app.directive('setFocus',[ function(){
         return {
             scope:false,
             link:function(scope, element){                     
                 scope.$watch("isFocus",function(newValue,oldValue, scope) {
                     //大圣来了，且要取芭蕉扇
                     if(newValue && scope.isCome){
                         element[0].focus(); //获取焦点
                         alert("猴哥")
                     }
                }, true);;
             }
         };
    }]);
</script>
</html>

三.代码说明

　　该文默认读者对angualrJS有一定的基础语法，此文的亮点在哪呢？亮点在于实现获取焦点的逻辑。angularjs文档只会告诉你用自定义指令获取焦点，如代码：

<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>

　　这块代码，除了能进入页面获取焦点，还能干啥？还能告诉初学者说，亲，自定义指令里面还可以直接return 一个function哟。

　　正式说说我是如何实现执行一些操作后实现获取焦点的：

　　首先自定义指令会用不必说了，可亲们是否还知道自定义里有一个属性叫scope啊？在我提供的链接的文章有说明它有两个值类型，boolean和对象，那里面的示例只说了值为对象的例子，但为boolean时没有说过。

　　既然我们需要在进行某个操作后再获取焦点，那么就需要我们能同时操作自定义指令与控制器里的变量，如第一例子里的isCome和isFocus。

　　而在scope说明中这样写到：

　　scope值为false(默认值): 使用父作用域作为自己的作用域。

　　为true时: 新建一个作用域，该作用域继承父作用域。

　　所以我们默认就可以直接在自定义指令里操作控制器里的变量。于是我就又用到了监听$watch,这是个什么鬼？后面会写个小文专门解释。只要监听到变化后的结果符合获取焦点的要求，我们就执行element[0].focus();来获取焦点。

文章来源：http://blog.csdn.net/zcl_love_wx/article/details/51382197

深究AngularJS—如何获取input的焦点（自定义指令）

angularJs之如何获取input的焦点（自定义指令）