directive <一>全面論述
一、定義指令
在Angular中，定義一個新指令的方法很簡單，只需要調用directive方法即可，該方法可以接收兩個參數，具體的調用格式如下：
var app = angular.module("myapp", []);
app.directive(name, fn) ;
示例代碼如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <script type="text/javascript" src="angular-1.3.0/angular.min.js"></script> </head> <body> <hello></hello> <div hello></div> <div class="hello"></div> <!-- directive:hello --> <div></div> <script type="text/javascript" > var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict: ‘AEMC‘, template: ‘<div>Hi everyone!</div>‘, replace: true } }); </script> </body> </html>
二、指令對象的基礎屬性
replace屬性值是布爾類型的，當該屬性值為true時，表示將模板中的內容替換為指令為標記；當該屬性值為false時，表示不替換指令標記，而是將內容插入到指令標記中，此時，無論指令標記中是否存在內容，都將被清空，該屬性的默認值為false。
templateUrl的屬性值是一個URL地址，該地址將指向一個模板頁面，該屬性常用於處理復雜模板內容，與template屬性不能同時使用，只能取其中之一。
示例代碼如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <title>指令對象的基礎屬性</title> <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script> <style type="text/css"> .frame{ padding:2px 8px; margin: 0px; font-size: 12px; width:320px; background-color: #eee; } </style> </head> <body> <div class="frame"> <ts-tplfile></ts-tplfile> <ts-tplscipt></ts-tplscipt> <ts-tplcache></ts-tplcache> </div> <script type="text/ng-template" id="tpl"> <h3>模板內容來自於script元素</h3> </script> <script type="text/javascript"> var app=angular.module(‘MyModule‘,[]) .run(function($templateCache){ $templateCache.put(‘cache‘, ‘<h3>模板內容來自緩存</h3>‘) }) .directive(‘tsTplfile‘,function(){ return{ restrict:‘EAC‘, templateUrl:‘tpl.html‘, }; }) .directive(‘tsTplscipt‘,function(){ return{ restrict:‘EAC‘, templateUrl:‘tpl‘, replace:true }; }) .directive(‘tsTplcache‘,function(){ return{ restrict:‘EAC‘, templateUrl:‘cache‘, }; }); </script> </body> </html>
三、Angular指令對象的重要屬性
1.指令對象中的transclude屬性
在定義指令對象時，可以不添加transclude屬性，如果添加該屬性，那麽它的屬性值是布爾類型的，默認值為false，表示不開啟屬性，如果設置為true時，則開啟了該屬性；當開啟了屬性後，就可以在模板中通過ng-transclude方式替換指令元素中的地內容。
代碼示例如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <script type="text/javascript" src="angular-1.3.0/angular.min.js"></script> </head> <body> <hello> <div>這裏是指令內部的內容。</div> </hello> <script type="text/javascript"> var myModule = angular.module("MyModule", []); myModule.directive("hello", function() { return { restrict:"AE", transclude:true, template:"<div>Hello everyone!<div ng-transclude></div></div>" } }); </script> </body> </html>
2.指令對象中的link屬性
“link”屬性的值是一個函數，在該函數中可以操控DOM元素對象，包括綁定元素的各類事件，定義事件觸發時執行的內容，函數定義的代碼如下：
link:function(scope,element,attrs){
...
}
其中，scope參數表示指令所在的作用域，它的功能和頁面中控制器註入的作用域是相同的，element參數表示指令中的元素，attrs表示指令元素的屬性集合。
示例代碼如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <title>指令對象的link屬性</title> <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script> <style type="text/css"> .frame{ padding:2px 8px; margin: 0px; font-size: 12px; width:320px; background-color: #eee; } .tip{ font-size: 9px; color:#666; margin:3px 5px; } </style> <script type="text/ng-template" id="tpl"> <button>單擊按鈕</button> </script> </head> <body> <div class="frame"> <ts-tplscipt></ts-tplscipt> <div class="tip">{{content}}</div> </div> <script type="text/javascript"> var app=angular.module(‘MyModule‘,[]) .directive(‘tsTplscipt‘,function(){ return{ restrict:‘EAC‘, templateUrl:‘tpl‘, replace:true, link:function(scope,element,attrs){ element.bind(‘click‘,function(){ scope.$apply(function(){ scope.content=‘這是點擊後的內容‘; }) attrs.$$element[0].disable=true; }); } }; }); </script> </body> </html>
3.指令對象的scope屬性
（1）scope屬性是布爾值
scope屬性自定義指令時，默認值就是布爾類型的，初始值為false。在這種情況下，指令中的作用域就是指令元素所在的作用域，兩者是相同的。如果scope屬性值為true,則表示子作用域（指令中的作用域成為子作用域，把指令元素所在的作用域稱為父作用域）是獨立創建的，當它的內容發生變化時，並不會修改父作用域中的內容。示例代碼如下：
<!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <title>scope屬性</title> <script type="text/javascript" src="angular-1.2.16/angular.min.js"></script> <style type="text/css"> .frame{ padding:2px 8px; margin: 0px; font-size: 12px; width:320px; background-color: #eee; } .tip{ font-size: 9px; color:#666; margin: 3px 5px; } </style> <script type="text/ng-template" id="tpl"> <div class="tip">{{message}}</div> <button ng-transclude></button> </script> </head> <body> <div class="frame"> <input ng-model="message" placeholder="請輸入內容"/> <ts-message>固定</ts-message> </div> <script type="text/javascript"> var app=angular.module(‘MyModule‘,[]) .directive(‘tsMessage‘,function(){ return{ restrict:‘EAC‘, templateUrl:‘tpl‘, transclude:true, scope:true, link:function(scope,element,attrs){ element.bind(‘click‘,function(){ scope.$apply(function(){ scope.message=‘這是單擊按鈕後的值‘; }) }) } }; }); </script> </body>
（2）scope屬性是對象
scope屬性值還可以設置成一個JSON對象，如果是對象，那麽，父作用域與自作用域是完全獨立的，不存在任何聯系。當指令中的scope屬性值是JSON對象時，如果子作用域需要添加屬性，必須先添加指令中的link函數，然後，通過函數中的scope對象進行添加；如果在子作用域中，要綁定或調用父作用域中的屬性和方法，則需要在scope屬性對應的的JSON對象值中添加綁定策略。
作者：開心糖果的夏天
鏈接：http://www.jianshu.com/p/6d30a0fbe74e
directive <一>全面論述