directive顧名思義，是angular中的一個指令。那么什么是指令那？
指令是DOM元素（例如屬性，元素名稱，注釋或CSS類）的標記，它們告訴AngularJS的HTML編譯器（$ compile）將指定的行為附加到該DOM元素（例如通過事件監聽器） ，甚至可以轉換DOM元素及其子元素。AngularJS附帶了一組內置的這些指令，如ngBind，ngModel和ngClass。
因為在HTML中不區分大小寫，因此我們通過小寫形式引用DOM中的偽指令，通常使用DOM元素（例如ng-model）上的使用連字符分隔的屬性。
接下來我們看一個簡單的 directive事例
index.html
<!DOCTYPE html><html lang="en" ng-app="DirectiveTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <div my-customer></div> <script src="js/angular.js"></script> <script src="js/index.js"></script></body></html>index.js
(function(angular){ angular.module('DirectiveTestApp',[]) .controller('MainCtrl',function($scope){ $scope.customer = { name:'Sunday', address:"jinan" } }).directive('myCustomer',function(){ return { template : '<h1>name : {{customer.name}} , address: {{customer.address}}</h1>' } });})(angular);我們在index.html中自定義了一個 my-customer 的屬性，在js代碼中我們對這個屬性做了一個聲明，即，為包含這個屬性的元素添加
了 <h1>name : {{customer.name}} , address: {{customer.address}}</h1> 的模板。 我們看一下當前代碼在瀏覽器中的展示形式。 大家可以看到在瀏覽器中的元素樹中，包含 my-customer 的div元素添加上了我們在js代碼中聲明的模板。 而在js中寫html代碼是一件特別蛋疼的事情，如果一直使用 template 會有特別多的不方便的地方，所以angular為我們提供了 templateUrl可以直接引入一個html文件，用于替代 template。
templateUrl是返回要加載并用于指令的HTML模板的URL的函數。 AngularJS將調用帶有兩個參數的templateUrl函數：指令被調用的元素，以及與該元素相關聯的attr對象
這句話是什么意思那？ 大家看下使用 templateUrl之后的代碼。
index.html
<!DOCTYPE html><html lang="en" ng-app="DirectiveTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <div my-customer type="name"></div> <div my-customer type="address"></div> <script src="js/angular.js"></script> <script src="js/index.js"></script></body></html>index.js
(function(angular){ angular.module('DirectiveTestApp',[]) .controller('MainCtrl',function($scope){ $scope.customer = { name:'Sunday', address:"jinan" } }).directive('myCustomer',function(){ return { templateUrl:function(elem,attr){ return 'views/' + attr.type + '.html'; } } });})(angular);name.html
<h2>Name: {{customer.name}}</h2>address.html
<h2>Address: {{customer.address}}</h2>我們在設置這個drective的時候，為它設置了一個額外的屬性，type=”” , 在為其設置 templateUrl的時候可以獲取到兩個參數 ，element , attr 即：指令被調用的元素，以及與該元素相關聯的attr對象， 返回模板的路徑。
restrict屬性： - A：匹配屬性名稱 - E：匹配元素名稱 - C：匹配類名 - M：匹配注釋
我們可以使用 “AE”的組合使其同時支持 屬性名稱和元素名稱。
簡單的看一下代碼： index.html
<!DOCTYPE html><html lang="en" ng-app="DirectiveTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <my-customer></my-customer> <script src="js/angular.js"></script> <script src="js/index.js"></script></body></html>index.js
(function(angular){ angular.module('DirectiveTestApp',[]) .controller('MainCtrl',function($scope){ $scope.customer = { name:'Sunday', address:"jinan" } }).directive('myCustomer',function(){ return { restrict:"E", templateUrl:function(elem,attr){ return 'views/customer.html'; } } });})(angular);customer.html
<h2>Name: {{customer.name}} Address: {{customer.address}}</h2>這一章就先說到這里，下一章為大家講解directive更深層次的用法。
新聞熱點
疑難解答
