angularJS directive詳解
前言javascript
最近學習了下angularjs指令的相關知識，也參考了前人的一些文章，在此總結下。php
歡迎批評指出錯誤的地方。css
Angularjs指令定義的APIhtml
AngularJs的指令定義大體以下java
angular.module("app",[]).directive("directiveName",function(){ return{ //經過設置項來定義 }; })
其中return返回的對象包含不少參數，下面一一說明jquery
1.restrictgit
（字符串）可選參數，指明指令在DOM裏面以什麼形式被聲明；angularjs
取值有：E(元素),A(屬性),C(類),M(註釋)，其中默認值爲A；github
E(元素)：<directiveName></directiveName>
A(屬性)：<div directiveName='expression'></div>
C(類)： <div class='directiveName'></div>
M(註釋)：<--directive:directiveName expression-->web
例如restrict：‘EA’ 則表示指令在DOM裏面可用元素形式和屬性形式被聲明；
通常來講，當你建立一個有本身模板的組件的時候，須要使用元素名，若是僅僅是爲爲已有元素添加功能的話，就使用屬性名
注意：若是想支持IE8，則最好使用屬性和類形式來定義。 另外Angular從1.3.x開始, 已經放棄支持IE8了.
2.priority
(數字)，可選參數，指明指令的優先級，若在單個DOM上有多個指令，則優先級高的先執行；
設置指令的優先級算是不經常使用的
比較特殊的的例子是，angularjs內置指令的ng-repeat的優先級爲1000，ng-init的優先級爲450；
3.terminal
（布爾型），可選參數，能夠被設置爲true或false，若設置爲true，則優先級低於此指令的其餘指令則無效，不會被調用(優先級相同的仍是會執行)
4.template（字符串或者函數）可選參數，能夠是：
（1）一段HTML文本
angular.module("app",[]).directive("hello",function(){ return{ restrict:'EA', template:"<div><h3>hello world</h3></div>" }; })
HTML代碼爲：<hello></hello>
結果渲染後的HTML爲：<hello> <div><h3>hello world</h3></div> </hello>
（2）一個函數，可接受兩個參數tElement和tAttrs
其中tElement是指使用此指令的元素，而tAttrs則實例的屬性，它是一個由元素上全部的屬性組成的集合（對象）形如：
{
title：‘aaaa’,
name:'leifeng' }
下面讓咱們看看template是一個函數時候的狀況
angular.module("app",[]).directive("directitle",function(){ return{ restrict:'EAC', template: function(tElement,tAttrs){ var _html = ''; _html += '<div>'+tAttrs.title+'</div>'; return _html; } }; })
HTML代碼：<directitle title='biaoti'></directitle>
渲染以後的HTML：<div>biaoti</div>
由於一段HTML文本，閱讀跟維護起來都是很麻煩的，所用一般會使用templateUrl這個。
5.templateUrl（字符串或者函數），可選參數，能夠是
（1）一個表明HTML文件路徑的字符串
（2）一個函數，可接受兩個參數tElement和tAttrs（大體同上）
注意：在本地開發時候，須要運行一個服務器，否則使用templateUrl會報錯 Cross Origin Request Script（CORS）錯誤
因爲加載html模板是經過異步加載的，若加載大量的模板會拖慢網站的速度，這裏有個技巧，就是先緩存模板
你能夠再你的index頁面加載好的，將下列代碼做爲你頁面的一部分包含在裏面。
<script type='text/ng-template' id='woshimuban.html'> <div>我是模板內容</div> </script>
這裏的id屬性就是被設置在templateUrl上用的。
另外一種辦法緩存是:
angular.module("template.html", []).run(["$templateCache", function($templateCache) { $templateCache.put("template.html", "<div>wo shi mu ban</div>"); }]);
6.replace
（布爾值），默認值爲false，設置爲true時候，咱們再來看看下面的例子（對比下在template時候舉的例子）
angular.module("app",[]).directive("hello",function(){ return{ restrict:'EA', replace：true, template:"<div><h3>hello world</h3></div>" }; })
HTML代碼爲：
<hello></hello>
渲染以後的代碼：<div><h3>hello world</h3></div>
對比下沒有開啓replace時候的渲染出來的HTML。發現<hello></hello>不見了。
另外當模板爲純文本（即template:"wo shi wen ben"）的時候，渲染以後的html代碼默認的爲文本用span包含。
7.scope
可選參數，（布爾值或者對象）默認值爲false，可能取值：
（1）默認值false。
表示繼承父做用域;
（2）true
表示繼承父做用域，並建立本身的做用域（子做用域）;
（3）{}
表示建立一個全新的隔離做用域；
7.1首先咱們先來了解下scope的繼承機制。咱們用ng-controller這個指令舉例，
咱們都知道ng-controller（內置指令）能夠從父做用域中繼承而且建立一個新的子做用域。以下：
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <div ng-init="aaa='父親'"> parentNode：{{aaa}} <div ng-controller="myController"> chrildNode： {{aaa}} </div> </div> <script> angular.module('myApp', []) .controller('myController',function($scope){ $scope.aaa = '兒子' }) </script> </body> </html>
這時頁面顯示是
parentNode：父親
chrildNode： 兒子
若去掉
$scope.aaa = '兒子'
則顯示
parentNode：父親
chrildNode： 父親
注意：
1）若一個元素上有多個指令，使用了隔離做用域，則只有其中一個能夠生效；
2）只有指令模板中的根元素才能得到一個新的做用域，這時候，scope就被設置爲true了；
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <div ng-init="aaa='父親'"> parentNode：{{aaa}} <div class='one' ng-controller="myController"> chrildNode： {{aaa}} <div class='two' ng-controller='myController2'> {{aaa}} </div> </div> </div> <script> angular.module('myApp', []) .controller('myController',function($scope){ $scope.aaa = '兒子'; }) .controller('myController2',function($scope){ $scope.aaa = '孫女'; }) </script> </body> </html>
頁面顯示爲：
parentNode：父親
chrildNode： cunjieliu
孫女
上面中class爲one那個div得到了指令ng-controller=’myController‘所建立的新的做用域；
而class爲two那個div得到了指令ng-controller=’myController2‘所建立的新的做用域；
這就是「只有指令模板中的根元素才能得到一個新的做用域」；
接下來咱們經過一個簡單明瞭的例子來講明scope取值不一樣的差異
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <div ng-controller='MainController'> 父親: {{name}} <input ng-model="name" /> <div my-directive></div> </div> <script> angular.module('myApp', []) .controller('MainController', function ($scope) { $scope.name = 'leifeng'; }) .directive('myDirective', function () { return { restrict: 'EA', scope:false,//改變此處的取值,看看有什麼不一樣 template: '<div>兒子:{{ name }}<input ng-model="name"/></div>' }; }); </script> </body> </html>
依次設置scope的值false，true，{}，結果發現（你們別偷懶，動手試試哈）
當爲false時候，兒子繼承父親的值，改變父親的值，兒子的值也隨之變化，反之亦如此。（繼承不隔離）
當爲true時候，兒子繼承父親的值，改變父親的值，兒子的值隨之變化，可是改變兒子的值，父親的值不變。（繼承隔離）
當爲{}時候，沒有繼承父親的值，因此兒子的值爲空，改變任何一方的值均不能影響另外一方的值。（不繼承隔離）
tip：當你想要建立一個可重用的組件時隔離做用域是一個很好的選擇，經過隔離做用域咱們確保指令是‘獨立’的,並能夠輕鬆地插入到任何HTML app中，而且這種作法防止了父做用域被污染；
7.2隔離做用域能夠經過綁定策略來訪問父做用域的屬性。
下面看一個例子
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <div ng-controller='MainController'> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world></hello-world> </div> <script> var app = angular.module('myApp',[]); app.controller('MainController',function(){}); app.directive('helloWorld',function(){ return { scope: false, restrict: 'AE', replace: true, template: '<p style="Hello World</p>' } }); </script> </body> </html>
運行代碼，並在input中輸入顏色值，結果爲
可是，但咱們將scope設置爲{}時候，再次運行上面的代碼能夠發現頁面並不能成功完整顯示！
緣由在於，這裏咱們將scope設置爲{}，產生了隔離做用域。
因此在template模板中{{color}}變成了依賴於本身的做用域，而不是依賴於父做用域。
所以咱們須要一些辦法來讓隔離做用域能讀取父做用域的屬性，就是綁定策略。
下面咱們就來探索設置這種綁定的幾種方法
方法一：使用@（@attr）來進行單向文本（字符串）綁定
<!doctype html> <html ng-app="myApp"> <head> <script src="http://cdn.staticfile.org/angular.js/1.2.10/angular.min.js"></script> </head> <body> <div ng-controller='MainController'> <input type="text" ng-model="color" placeholder="Enter a color"/> <hello-world color-attr='{{color}}'></hello-world> //注意這裏設置了color-attr屬性，綁定了{{color}} </div> <script> var app = angular.module('myApp',[]); app.controller('MainController',function