• 深究AngularJS——如何获取input的焦点(自定义指令)


    关于如何获取input框、textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答,只能说明作者并为真正理解人家的需求。ng-focus是一个事件,跟原生JS(JavaScript)的onfocus是一样的,当我们点击input框时,就会触发该事件,而在该事件里我们可以调用一个函数。所以,当人家问你如何获取焦点时一般的意思是,如果我进行了某些操作后,不用鼠标点击是如何自动获取焦点,问题的关键是“自动”。
    因为AngularJS没有像原生JS那样可通document.getElementById("idVlaue")直接获取元素的功能,所以只能通过自定义指令的方式实现,所以需要实现这个,我们还得有angularjs自定义指令的基础。

    2. 代码示例

    各位看官,芭蕉即焦点,如有戳中你的笑点,概不负责。温馨提示:下面代可直接拿去编辑器运行看效果哦,哎,没办法,就是这么负责。

    <!-- 传说芭蕉扇乃铁扇公主唾液所化,因此可重复取 -->
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    </head>
    <body>
    
        <div ng-app="myApp" ng-controller="control">
            <input type="text" set-Focus ng-blur="setBlur()">
            <button ng-click="getFocus()">孙爷爷我要去取芭蕉扇了</button>
        </div>  
    
    <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>
    </body> 
    </html>
    

    3. 代码说明

     该文默认读者对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();来获取焦点。

  • 相关阅读:
    学生宿舍水电管理系统 产品需求评审(用户故事)
    nyoj 14-会场安排问题 (贪心)
    好看的鼠标hover效果
    JavaScript-三种弹窗方式
    博客园美化夜间模式
    js写个小时钟
    js获取时间,循环执行任务,延迟执行任务
    Bzoj1103 [POI2007]大都市meg
    POJ2155 Matrix
    POJ3625 Building Roads
  • 原文地址:https://www.cnblogs.com/minghui007/p/7195813.html
Copyright © 2020-2023  润新知