背景介紹
這例子是視頻中的例子，有一個動感超人，有三種能力，力量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 指令的互動的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！
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
