HTML

1  2  3  4  5     
      6     
      7      8      9 10 11 12     
     
      13         
      
       14             
       
        动感超人---力量
       15         
      
16     
     
17     
     
      18         
      
       19             
       
        动感超人2---力量+敏捷
       20         
      
21     
     
22     
     
      23         
      
       24             
       
        动感超人3---力量+敏捷+发光
       25         
      
26     
     
27 28 29 

 

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                 console.log(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 });