標籤：
一、指令的職責
指令的職責是修改DOM結構，並將範圍和DOM串連起來.即指令既要操作DOM，將範圍內的資料繫結到DOM節點上，又要為DOM綁定事件調用範圍內的對應的方法。
二、建立自訂指令
調用自訂指令的4種方式：元素、屬性、樣式類、注釋.
常用的是前兩種,執行個體如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body ng-app="myApp" ><hello></hello><!--E元素--><div hello></div><!--A屬性--><div class="hello"></div><!--C樣式類--><!--directive:hello--> </body><script type="text/javascript" src="js/angular.js" ></script> <script type="text/javascript" src="js/directive.js" ></script></html>
js代碼：
var app = angular.module("myApp",[]);app.directive("hello",function(){return {restrict: ‘AECM‘,template:‘<div>Hi everyone</div>‘,//模板//templateUrl:‘index.html‘,replace: true}});
測試結果只有3條內容，沒有顯示採用注釋的方法調用指令的結果.不過常用的還是使用屬性和元素的方式來調用指令.
三、指令定義中用到的其他欄位
1.templateUrl
模板的顯示還可以使用templateUrl屬性來調用html檔案中的DOM元素.
如果其他指令也要使用同一個模板，可以利用AngularJs中的$templateCache屬性將模板緩衝起來然後再調用：
用到angular中的run方法，它只會執行一次.
js檔案：
var app = angular.module("myApp",[]);//app.directive("hello",function(){//return {//restrict: ‘AECM‘,//template:‘<div>Hi everyone</div>‘,//模板////templateUrl:‘index.html‘,//replace: true//}//});app.run(function($templateCache){$templateCache.put("hello.html","<div>Hello,my name is yo</div>");});app.directive("hello",function($templateCache){return {restrict: ‘A‘,//template:‘<div>Hi everyone</div>‘,//模板template:$templateCache.get("hello.html"),//模板//templateUrl:‘index.html‘,replace: true}});app.directive("hi",function($templateCache){return {restrict: ‘E‘,//template:‘<div>Hi everyone</div>‘,//模板template:$templateCache.get("hello.html"),//模板//templateUrl:‘index.html‘,replace: true}});
測試結果：
2.transclude：是否為指令模板或編譯函數提供指令元素中的內容.
不加這個欄位，在指令中添加模板會替換掉之前有的內容，transclude是很重要的一個欄位，它可以讓指令與指令之間相互嵌套.
js關鍵代碼：
效果：
3. link:定義將指令與範圍串連起來的連結函數
js檔案：
var app = angular.module("myApp",[]);app.controller("myController",[‘$scope‘,function($scope){$scope.loadData = function() {console.log("資料載入中...");};}]);app.directive("loader",function($templateCache){return {restrict: ‘AE‘,link: function(scope,element,attr){element.bind("mouseenter",function(){scope.loadData();});}//template:‘<div>Hi everyone</div>‘,//模板//transclude: true,//template:"<div>Hi everyone<div ng-transclude></div></div>",//templateUrl:‘index.html‘,}});
效果：
註：將scope.loadData();替換成scope.$apply("loadData()");可以達到同樣的效果.
如果有多個controller指令的情況，如何調用方法？
採用用屬性的方式來調用屬性:
var app = angular.module("myApp",[]);app.controller("myController",[‘$scope‘,function($scope){$scope.loadData = function() {console.log("資料載入中...");};}]);app.controller("myController2",[‘$scope‘,function($scope){$scope.loadData2 = function() {console.log("資料載入中aaaa...");};}]);app.directive("loader",function($templateCache){return {restrict: ‘AE‘,link:function(scope,element,attrs){element.bind("mouseenter",function(){//scope.loadData();scope.$apply(attrs.howtoload);});}//template:‘<div>Hi everyone</div>‘,//模板//transclude: true,//template:"<div>Hi everyone<div ng-transclude></div></div>",//templateUrl:‘index.html‘,}});
AngularJs中的directives（指令）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
