angularJs编写多指令的情况

本实例主要展示controller和link参数的使用.以及多个指令同时作用的情况.

 1 <!DOCTYPE html> 2 <html ng-app="myModule"> 3 <head lang="en"> 4   <meta charset="UTF-8"> 5   <title></title> 6 </head> 7 <body> 8 <div> 9   <div>10     <superman strength>动感超人---力量</superman>11   </div>12   <div>13     <superman strength speed>动感超人---力量+速度</superman>14   </div>15   <div>16     <superman strength speed light>动感超人---力量+速度+发光</superman>17   </div>18 </div>19 20 </body>21 <script type="text/javascript" src='/images/loading.gif' data-original="../js/angular1.4.3.js"></script>22 <script type="text/javascript">23 var myModule=angular.module("myModule",[]);24   myModule.directive("superman", function () {25     return{26       scope:{},27       restrict:"AE",28       controller:function($scope){29         $scope.abilities=[];30         this.addStrength= function () {31           $scope.abilities.push("strength");32         };33         this.addSpeed= function () {34           $scope.abilities.push("speed");35         };36         this.addLight= function () {37           $scope.abilities.push('light');38         };39       },40       link: function (scope,element,attrs) {41         element.bind("mouseenter", function () {42           console.log(scope.abilities);43         })44       }45     }46   });47   myModule.directive("strength", function () {48     return{49       require:"^superman",50       link: function (scope, element, attrs, supermanCtrl) {51         supermanCtrl.addStrength();52       }53     }54   });55   myModule.directive("speed", function () {56     return{57      require:"^superman",58       link: function (scope, element, attrs, supermanCtrl) {59         supermanCtrl.addSpeed();60       }61     };62   });63   myModule.directive("light", function () {64     return{65       require:"^superman",66       link: function (scope,element,attrs,supermanCtrl) {67         supermanCtrl.addLight();68       }69     }70   })71 </script>72 </html>