Angular指令

定義一個指令的方法非常簡單，只需要調用`directive`方法即可:

 var app=angular.module('myapp',[]); app.directive(name,fn)

1. 基礎指令

 var app=angular.module('myapp',[]); app.run(function($templateCache){  $templateCache.put('cache','<h3>模板內容來源于緩存</h3>') }); app.directive('tsHello',function(){  return{  restrict:'EAC',  template:'<h3>Hello,directive</h3>'  } }) app.directive('tsTplfile',function(){  return{  restrict:'EAC',  templateUrl:'/static/tpl.html'  } }); app.directive('tsTplscript',function(){  return {  restrict:'EAC',  templateUrl:'tpl',  replace:true  } }); //templateUrl屬性值是添加的緩存名稱，加速文件訪問 app.directive('tsTplcache',function(){  return{  restrict:'EAC',  templateUrl:'cache'  } }) </script>

2. 重要指令

2.1 transclude

 <script type="text/ng-template" id='tpl'> <div>  <input type="text" ng-model='text' />  <div ng-transclude></div> </div> </script> <ts-tplscript>{{text}}</ts-tplscript> <script type="text/javascript"> var app=angular.module('myapp',[]); app.directive('tsTplscript',function(){  return {  restrict:'EAC',  templateUrl:'tpl',  transclude:true  } }); </script>

關于transclude更加詳細的介紹，參見另外一篇文章

2.2 link

link屬性的值是一個函數，在該函數中可以操控DOM元素的對象，包括綁定元素的各類事件，定義事件觸發時執行的內容等：

link:function(scope,iEle,iAttrs)

link 函數包括3個主要的參數，其中，scope參數表示指令所在的作用域，它的功能與頁面中控制器注入的作用域是相同的，iEle參數表示指令中的元素，該元素可以通過Angular內部封裝的jqLite進行調用，jqLite相當于是一個壓縮版的jQuery，包含了主要的元素操作API，在語法上與jQuery類似，iAttrs參數表示指令元素的屬性集合，通過這個參數可以獲取元素中的各類屬性。

 <script type="text/ng-template" id='tpl'> <button>單擊按鈕</button> </script> <div> <ts-tplscript></ts-tplscript> <div>{{content}}</div> </div> <script type="text/javascript"> var app=angular.module('myapp',[]); app.directive('tsTplscript',function(){  return {  restrict:'EAC',  templateUrl:'tpl',  replace:true,  link:function(scope,iEle,iAttrs){   iEle.bind('click',function(){   scope.$apply(function(){    scope.content='這是點擊后的內容';   })   iAttrs.$$element[0].disabled=true;//這里也可以替換為this.disabled=true;   });  }  } }); </script>

自定義tsTplscript指令時，在指令返回的對象中添加了link屬性，用于綁定和執行DOM元素的各類事件，在屬性值執行的函數中，添加scope,iEle,iAttrs三個參數，在指令執行的過程中，由于指令中并沒有定義scope屬性，因此，scope參數默認就是元素外層父級scope屬性，即控制器注入的$scope屬性。