Oranq 2017-09-06
一.写在前面
关于如何获取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
<table id="table" class="table table-striped table-bordered table-hover table-nowrap" width="100%&qu