`

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

阅读更多

一.写在前面

  关于如何获取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的焦点(自定义指令)

    关于如何获取input框、textarea等的焦点,网上有许多文章都只是会跟你说ng-focus这个内置指令。像这种解答,只能说明作者并为真正理解人家的需求。ng-focus是一个事件,跟原生JS(JavaScript)的onfocus是一样的,当...

    深究AngularJS中$sce的使用

    在AngularJS中,$sce(Strict Contextual Escaping,严格上下文转义)是一个核心服务,用于确保在模板中动态插入的内容是安全的。它主要用于处理和展示可能包含恶意代码的数据,例如HTML、JavaScript、资源URL等。...

    深究AngularJS中ng-drag、ng-drop的用法

    ngDraggable是一个自定义的AngularJS服务,提供拖放功能。在提供的代码片段中,没有展示完整的插件源码,但通常这类插件会处理浏览器的鼠标或触摸事件,以及在拖放过程中元素的样式更新,确保拖放操作的平滑进行。 ...

    深究AngularJS——ng-checked(回写:带真实案例代码)

    ng-checked指令在AngularJS中用于获取和设置复选框(checkbox)的选中状态。它依赖于作用域上的一个表达式,该表达式返回true或false,以决定复选框是否处于选中状态。本文通过一系列步骤,详细介绍了需求分析、代码...

    深究AngularJS之ui-router详解

    AngularJS的UI-Router是AngularJS的一个强大路由插件,它提供了一种更灵活的方式来管理应用的导航和视图。本文将深入解析AngularJS之UI-Router,帮助开发者更好地理解和运用这一工具。 首先,要使用UI-Router,我们...

    Angularjs使用指令做表单校验的方法

    校验规则为数字,大写字母,小写字母至少出现两项,通过正则配合ng-pattern能够实现相同的效果,此处仅为引入指令校验,不做深究。其中,user-validator为自定义指令。 &lt;form class=form-horizontal name=form ...

    Android安全架构深究

    《Android安全架构深究》这本书深入探讨了Android操作系统的核心安全机制,揭示了其设计原则、实现方式以及如何保障用户和应用程序的安全。Android作为全球最受欢迎的移动操作系统,其安全性至关重要,对于开发者、...

    ANDROID安全架构深究.pdf

    ANDROID安全架构深究.pdf ANDROID安全架构深究.pdf ANDROID安全架构深究.pdf

    C语言外挂编写深究相关

    外挂,简单来说,是指在游戏中通过编程手段获取非正常优势的程序。本主题“C语言外挂编写深究”将围绕如何使用C语言编写游戏外挂进行深入探讨,特别是结合Windows操作系统来实现这一目标。 首先,我们需要理解C语言...

    深究动画精神家园.doc

    深究动画精神家园.doc

    高中数学抛物线焦点弦性质总结30条.doc

    高中数学抛物线焦点弦性质总结30条 本文总结了高中数学抛物线焦点弦性质的30个重要知识点,对于高中数学学习和考试具有重要的参考价值。 1. 以 AB 为直径的圆与准线相切; 知识点:抛物线的准线特征,圆的切线...

    c语言辅助编写深究.pdf

    c语言辅助编写深究 c语言辅助编写深究 c语言辅助编写深究 c语言辅助编写深究 c语言辅助编写深究 c语言辅助编写深究

    《Android安全架构深究》PDF版本下载.txt

    根据提供的文件信息,我们可以深入探讨《Android安全架构深究》这一主题所涵盖的关键知识点。由于提供的文本内容较少,以下分析将基于标题、描述以及通常情况下此类书籍可能涉及的主题来进行。 ### Android安全架构...

Global site tag (gtag.js) - Google Analytics