背景介紹
這例子是視頻中的例子，有一個動感超人，有三種能力，力量strength，速度speed，發光light。
這三種能力作為三種屬性，定義動感超人作為一個標籤，只要添加對應的屬性就能擁有該能力。
為了便於結果的展示，為標籤添加鼠標的響應事件，當鼠標移動到對應的標籤上就會觸發一個方法，打印出具備的能力。
程序分析
html部分的代碼如下：
<div> <superman>nothing!</superman> <superman strength >strength!</superman> <superman strength speed >strength speed!</superman> <superman strength speed light >strength speed light!</superman> </div>
下面看看如何實現，首先依然是創建一個模塊：
var myAppModule = angular.module("myApp",[]);
在該模塊的基礎上，創建標籤superman，與前麵類似。
myAppModule.directive("superman",function(){ return{ scope:{}, restrict:'AE', transclude:true, template:"<div><div ng-transclude></div></div>", controller:function($scope){ $scope.abilities = []; this.addStrength = function(){ $scope.abilities.push("strength"); }; this.addSpeed = function(){ $scope.abilities.push("speed"); }; this.addLight = function(){ $scope.abilities.push("light"); }; }, link:function(scope,element,attr){ element.bind("mouseenter",function(){ console.log(scope.abilities); }); } } });這裡不同的是，在方法內部有一個controller屬性，這個並不是ng-controller這種控制器，而是指令對外開放的一個接口，裡面聲明的方法，在外部可以作為公開的方法使用，其他的指令可以通過依賴，使用這些方法。
接下來再創建三個能力對應的指令
myAppModule.directive("strength",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addStrength(); } } }); myAppModule.directive("speed",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addSpeed(); } } }); myAppModule.directive("light",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addLight(); } } });三個指令的代碼都差不多，其中require指定了依賴的指令。
link中多了一個參數supermanCtrl，這個參數猜想是superman中的controller，所以命名採用superman+Ctrl的方式。
【由於不懂內部原理，這裡僅僅是猜想，但是實驗證明，如果改變這個參數的名字，會報錯。 】
聲明了這三個指令，就可以把這三個指令當做super的屬性來使用，當註明該屬性時，就會觸發內部的link內的方法，調用superman中公開的方法。
總結起來，指令的交互過程：
1 首先創建一個基本的指令，在controller屬性後，添加對外公開的方法。
2 創建其他交互的指令，在require屬性後，添加對應的指令依賴關係；在link中調用公開的方法
全部程序代碼：
<!doctype html><html ng-app="myApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script> </head> <body> <div> <superman>nothing!</superman> <superman strength >strength!</superman> <superman strength speed >strength speed!</superman> <superman strength speed light >strength speed light!</superman> </div> <script type="text/javascript"> var myAppModule = angular.module("myApp",[]); myAppModule.directive("superman",function(){ return{ scope:{}, restrict:'AE', transclude:true, template:"<div><div ng-transclude></div></div>", controller:function($scope){ $scope.abilities = []; this.addStrength = function(){ $scope.abilities.push("strength"); }; this.addSpeed = function(){ $scope.abilities.push("speed"); }; this.addLight = function(){ $scope.abilities.push("light"); }; }, link:function(scope,element,attr){ element.bind("mouseenter",function(){ console.log(scope.abilities); }); } } }); myAppModule.directive("strength",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addStrength(); } } }); myAppModule.directive("speed",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addSpeed(); } } }); myAppModule.directive("light",function(){ return{ require:'^superman', link:function(scope,element,attr,supermanCtrl){ supermanCtrl.addLight(); } } }); </script> </body></html>運行結果：
以上就是對AngularJS 指令的交互的資料整理，後續繼續補充相關資料，謝謝大家對本站的支持！