《AngularJS》--指令的相互调用

转载自http://blog.csdn.net/zhoukun1008/article/details/51296692

人们喜欢AngularJS，因为他很有特色，其中他的指令和双向数据绑定很吸引着人们，那么，AngularJS的指令有什么作用哪？指令之间的是怎样相互调用的哪？

下面有一个小小的Demo，写的是AngularJS指令之间的相互调用，大家看一下。这个Demo是这样的，页面上有三个div，每个div绑定不同的指令，当我们用鼠标滑过三个div时以触发不同的事件。

HTML代码

1. <!DOCTYPE html>
2. <html lang="en" ng-app="MyModule">
3. <head>
4. <meta charset="UTF-8">
5. <title></title>
6. </head>
7. <body>
8. <div class="row">
9. <div class="col-md-3">
10. <superman strength> 动感超人 力量</superman>
11. </div>
12. </div>
13. <div class="row">
14. <div class="col-md-3">
15. <superman strength speed> 动感超人 力量 速度 </superman>
16. </div>
17. </div>
18. <div class="row">
19. <div class="col-md-3">
20. <superman strength speed light> 动感超人 力量 速度 发光</superman>
21. </div>
22. </div>
23. </body>
24. <script src="angular-1.3.0.14/angular.js"></script>
25. <script src="superman.js"></script>
26. </html>

JS代码

1. var myModule=angular.module("MyModule",[]);
2. myModule.directive("superman",function(){
3. return{
4. scope:{},
5. restrict:'AE',
6. controller:function($scope){
7. $scope.abilities=[];
8. this.addStrength=function(){
9. $scope.abilities.push("strength");
10. };
11. this.addSpeed=function(){
12. $scope.abilities.push("speed");
13. };
14. this.addLight=function(){
15. $scope.abilities.push("light");
16. };
17. },
18. link:function(scope,element,attrs){
19. element.addClass('btn btn-primary');
20. element.bind("mouseenter",function(){
21. alert(scope.abilities);
22. })
23. }
24. }
25. });
26. myModule.directive("strength",function(){
27. return{
28. require:'^superman',
29. link: function (scope, element, attrs, supermanCtrl) {
30. supermanCtrl.addStrength();
31. }
32. }
33. });
34. myModule.directive("speed",function(){
35. return{
36. require:'^superman',
37. link: function (scope, element, attrs, supermanCtrl) {
38. supermanCtrl.addSpeed();
39. }
40. }
41. })
42. myModule.directive("light",function(){
43. return{
44. require:'^superman',
45. link: function (scope, element, attrs, supermanCtrl) {
46. supermanCtrl.addLight();
47. }
48. }
49. })

在上面的HTML标签中，我们看见了在每个div中，都有自定义的标签，像<superman>、<speed>、<light>等等， 我们可以给这些标签绑定特殊的一些功能，我们需要每个标签绑定的功能不一样，这时候，我们就用到ng-Controller和directive了，其中superman指令中的Controller里面定义了很多方法，这些方法就能提供给外面的一些指令使用，这样就能形成指令的嵌套使用。