angular學習筆記(十九)-指令修改dom

詩&遠方發表於2014-05-27
Angular筆記

本篇主要介紹angular使用指令修改DOM:

使用angular指令可以自己擴充套件html語法,還可以做很多自定義的事情.在後面會專門講解這一塊的知識,這一篇只是起到了解入門的作用.

與控制器,過濾器,服務,一樣,可以通過模組例項的directive的方法來建立指令:

var someModule = angular.module('SomeModule',[]);

someModule.directive('directiveName',function(){

     return {

         link: function(scope,elements,attrs,controller){

         }

     }

});

directive傳入兩個引數:

第一個引數是指令的名字;

第二個引數是一個工廠函式:

函式返回一個物件,物件的link方法的函式有四個引數:

scope:獲取外層scope的引用

elements:它所存在的DOM元素

attrs:傳遞給指令的一個屬性陣列

controller:DOM元素上的控制器

 

下面來看個簡單的小例子,在html5中,元素有autofocus屬性,新增了這個屬性的元素,會自動獲取焦點.我們可以使用angular來寫一個這樣的指令:

我們讓第二個button在開啟的時候就獲取焦點,所以按回車就相當於點選了這個按鈕:

<!DOCTYPE html>
<html ng-app="AutoFocus">
<head>
  <title>16.1使用指令修改DOM</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
  <style type="text/css">
    *{
      font-family:'MICROSOFT YAHEI';
      font-size:12px
    }
  </style>
</head>
<body>
<div ng-controller="focus">
  <button ng-click="nofocus()">沒有焦點</button>
  <br/>
  <button myautofocus ng-click="hasfocus()">有焦點</button>
  <br/>
  <br/>
  <span>{{text}}</span>
</div>
</body>
</html>
var autoFocus = angular.module('AutoFocus',[]);
autoFocus.controller('focus',function($scope){
    $scope.text="沒有點選任何按鈕";
    $scope.nofocus = function(){
        $scope.text="沒有點選任何按鈕";
    };
    $scope.hasfocus = function(){
        $scope.text="點選了有焦點按鈕";
    };
});
autoFocus.directive('myautofocus',function(){
    return {
        link: function(scope,elements,attrs,controller){
            elements[0].focus();
        }
    }
});

一.建立模組AutoFocus

二.通過模組的controller方法建立控制器focus

三.通過模組的directive方法建立指令myautofocus

    myautofocus的工廠函式就是實現元素自動獲取焦點這一功能

 

效果截圖:

開啟頁面時:

 

按下回車後:

 

 

    

 

 

 

 

 

相關文章