深究AngularJS如何獲取input的焦點（自定義指令）

更新時間：2017年06月12日 11:47:14 作者：zcl_love_wx

本篇文章主要介紹了AngularJS如何獲取input的焦點（自定義指令），具有一定的參考價值，感興趣的小伙伴們可以參考一下

1. 寫在前面

關(guān)于如何獲取input框、textarea等的焦點，網(wǎng)上有許多文章都只是會跟你說ng-focus這個內(nèi)置指令。像這種解答，只能說明作者并為真正理解人家的需求。ng-focus是一個事件，跟原生JS（JavaScript）的onfocus是一樣的，當(dāng)我們點擊input框時，就會觸發(fā)該事件，而在該事件里我們可以調(diào)用一個函數(shù)。所以，當(dāng)人家問你如何獲取焦點時一般的意思是，如果我進(jìn)行了某些操作后，不用鼠標(biāo)點擊是如何自動獲取焦點，問題的關(guān)鍵是“自動”。

因為AngularJS沒有像原生JS那樣可通document.getElementById("idVlaue")直接獲取元素的功能，所以只能通過自定義指令的方式實現(xiàn)，所以需要實現(xiàn)這個，我們還得有angularjs自定義指令的基礎(chǔ)。可參考：http://www.dhdzp.com/article/115979.htm

2. 代碼示例

各位看官，芭蕉即焦點，如有戳中你的笑點，概不負(fù)責(zé)。溫馨提示：下面代可直接拿去編輯器運行看效果哦，哎，沒辦法，就是這么負(fù)責(zé)。

<!-- 傳說芭蕉扇乃鐵扇公主唾液所化，因此可重復(fù)取 -->
<!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("猴哥，老牛不在家，我一介女子還不是你說什么我就照做，可你進(jìn)入人家的身體也不打聲招呼，進(jìn)了就進(jìn)了，還搞得我那么難受，求你別搞了，給，芭~~~蕉~~~扇！")
      }
    }, true);;
    }
   };
 }]);

</script>
</body> 
</html>

3. 代碼說明

首先說明一下，我本后臺Java工程師，因前端大牛搭了AngularJS后卻辭職去了新浪，一下無人接手，我便自告奮勇接了活。為了啥？為了漲工資塞！

該文默認(rèn)讀者對angualrJS有一定的基礎(chǔ)語法，此文的亮點在哪呢？亮點在于實現(xiàn)獲取焦點的邏輯。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>

這塊代碼，除了能進(jìn)入頁面獲取焦點，還能干啥？還能告訴初學(xué)者說，親，自定義指令里面還可以直接return 一個function喲。

正式說說我是如何實現(xiàn)執(zhí)行一些操作后實現(xiàn)獲取焦點的：

首先自定義指令會用不必說了，可親們是否還知道自定義里有一個屬性叫scope??？在我提供的鏈接的文章有說明它有兩個值類型，boolean和對象，那里面的示例只說了值為對象的例子，但為boolean時沒有說過。

既然我們需要在進(jìn)行某個操作后再獲取焦點，那么就需要我們能同時操作自定義指令與控制器里的變量，如第一例子里的isCome和isFocus。而在scope說明中這樣寫到：scope值為false(默認(rèn)值): 使用父作用域作為自己的作用域。為true時: 新建一個作用域，該作用域繼承父作用域。所以我們默認(rèn)就可以直接在自定義指令里操作控制器里的變量。于是我就又用到了監(jiān)聽$watch,這是個什么鬼？后面會寫個小文專門解釋。只要監(jiān)聽到變化后的結(jié)果符合獲取焦點的要求，我們就執(zhí)行element[0].focus();來獲取焦點。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: