AngularJs學習筆記(4)——自定義指令
對指令的第一印象:它是一個自定義標簽!
先來看一個簡單的指令:
<!doctype html> <html ng-app="myApp"> <head> <title> 自定義指令</title> <script type="text/javascript" src="http://localhost:10100/angular.min.js" charset="utf-8"></script> </head> <body> <my-directive></my-directive> <script type="text/javascript" src="myDirective.js"></script> </body> </html>
var app=angular.module("myApp",[]); app.directive("myDirective",directiveFunc); function directiveFunc() { return { restrict:"E", template:"<a href=‘http://baidu.com‘>百度一下</a>" }; };
這裏面需要註意的是:
1.指令名應該是駝峰命名風格的,如"myDirective",對應的HTML標簽是"my-directive"
2、函數應該返回一個對象
運行結果如下:
這裏可以看到,template的內容被包含在了自定義指令內部
指令中如果加上replace屬性(replace:true),則自定義指令標簽會直接被template內容替換,如下:
function directiveFunc() { return { restrict:"E", replace:true, template:"<a href=‘http://baidu.com‘>百度一下</a>" }; };
--------------------------------------------------------------------------------------------------------------------------分割線1--------------------------------------------------------------------------------------------------------------------------
之前說指令的第一印象是自定義標簽,往往第一印象並不是準確的,實際上聲明指令並不需要創建一個新的自定義元素
聲明指令本質上是在HTML中通過元素、屬性、類或註釋來添加功能
以下申明指令的格式都是合法的:
<my-directive></my-directive> //元素 <div my-directive></div> //屬性 <div class="my-directive"></div> //類 <!--directive:my-directive--> //註釋
但是,無論有多少種方式可以聲明指令,我們堅持使用屬性方式,因為它有比較好的跨瀏覽器兼容性
指令定義中的restrict 屬性就是用來匹配指令格式的,它們分別是元素(E)、屬性(A)、類(C)或註釋(M)
我們可以指定一個或多個格式
我們都知道,指令作為一個屬性,可以設置一個表達式,例如
<h1 ng-init="greeting=‘HelloWorld‘"> The greeting is: {{ greeting }} </h1>
ng-init是內置指令,其實,自定義指令directive也是可以的,但是
值得註意的是:所有指令(內置或者自定義)都會創建新的子作用域 ,使得表達式中的對象都有其明確的作用域區間
--------------------------------------------------------------------------------------------------------------------------分割線2--------------------------------------------------------------------------------------------------------------------------
指令能夠作為自定義標簽使用,當然也能夠接收參數變量,如下:
<!doctype html> <html ng-app="myApp"> <head> <title> 自定義指令</title> <script type="text/javascript" src="http://localhost:10100/angular.min.js" charset="utf-8"></script> </head> <body> <div ng-controller="dirCtrl" my-directive my-url={{myUrl}} my-link={{myLink}}> </div> <script type="text/javascript" src="myDirective.js"></script> <script> <!-- 隱式控制器 --> function dirCtrl($scope){ $scope.myUrl="http://baidu.com"; $scope.myLink="再百度一下試試"; }; </script> </body> </html>
var app=angular.module("myApp",[]); app.directive("myDirective",directiveFunc); function directiveFunc() { return { restrict:"A", replace:true, template:‘<a href="{{ myUrl }}">{{ myLink }}</a>‘, scope: { //這個"@"綁定策略告訴AngularJS將DOM中some-property屬性的值復制給新作用域對象中的someProperty屬性 myUrl: [email protected], myLink: [email protected] //默認情況下someProperty在DOM中的映射是some-property屬性 //如果我們想顯式指定綁定的屬性名,可以用如下方式 //myUrl: [email protected] } }; };
這樣做,貌似所有的自定義屬性,包括“my-directive”本身都還顯式存在
指令的生命周期開始於$compile方法並結束於link方法
AngularJs學習筆記(4)——自定義指令