前面基本了解了指令的相關內容：
1 如何自定義指令
2 指令的復用
本篇看一下指令之間如何交互。學習內容來自《慕課網 指令3》
背景介紹
這例子是視頻中的例子，有一個動感超人，有三種能力，力量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>
運行結果：
