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）——自定義指令