zoukankan      html  css  js  c++  java

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

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

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

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

           HTML代码

    [html] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    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.   
    14.     <div class="row">  
    15.         <div class="col-md-3">  
    16.             <superman strength speed> 动感超人 力量 速度 </superman>  
    17.         </div>  
    18.     </div>  
    19.   
    20.     <div class="row">  
    21.         <div class="col-md-3">  
    22.             <superman strength speed light> 动感超人 力量 速度 发光</superman>  
    23.         </div>  
    24.     </div>  
    25. </body>  
    26. <script src="angular-1.3.0.14/angular.js"></script>  
    27. <script src="superman.js"></script>  
    28. </html>  

          JS代码

    [javascript] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. var myModule=angular.module("MyModule",[]);  
    2.   
    3. myModule.directive("superman",function(){  
    4.     return{  
    5.         scope:{},  
    6.         restrict:'AE',  
    7.         controller:function($scope){  
    8.             $scope.abilities=[];  
    9.             this.addStrength=function(){  
    10.                 $scope.abilities.push("strength");  
    11.             };  
    12.             this.addSpeed=function(){  
    13.                 $scope.abilities.push("speed");  
    14.             };  
    15.             this.addLight=function(){  
    16.                 $scope.abilities.push("light");  
    17.             };  
    18.         },  
    19.         link:function(scope,element,attrs){  
    20.             element.addClass('btn btn-primary');  
    21.             element.bind("mouseenter",function(){  
    22.                alert(scope.abilities);  
    23.             })  
    24.         }  
    25.     }  
    26.   
    27.   
    28. });  
    29.   
    30. myModule.directive("strength",function(){  
    31.     return{  
    32.         require:'^superman',  
    33.         link: function (scope, element, attrs, supermanCtrl) {  
    34.             supermanCtrl.addStrength();  
    35.         }  
    36.     }  
    37. });  
    38.   
    39. myModule.directive("speed",function(){  
    40.     return{  
    41.         require:'^superman',  
    42.         link: function (scope, element, attrs, supermanCtrl) {  
    43.             supermanCtrl.addSpeed();  
    44.         }  
    45.     }  
    46. })  
    47.   
    48. myModule.directive("light",function(){  
    49.     return{  
    50.         require:'^superman',  
    51.         link: function (scope, element, attrs, supermanCtrl) {  
    52.             supermanCtrl.addLight();  
    53.         }  
    54.     }  
    55. })  


          在上面的HTML标签中，我们看见了在每个div中，都有自定义的标签，像<superman>、<speed>、<light>等等， 我们可以给这些标签绑定特殊的一些功能，我们需要每个标签绑定的功能不一样，这时候，我们就用到ng-Controller和directive了，其中superman指令中的Controller里面定义了很多方法，这些方法就能提供给外面的一些指令使用，这样就能形成指令的嵌套使用。
  • 相关阅读:
    动态页面技术----EL技术、JSTL技术，javaEE的开发模式
    动态页面技术----JSP技术
    会话技术Cookie&Session
    HttpServletRequest
    设计模式和抽象类、方法
    类的继承
    类与对象
    面向对象和面向过程的区别
    PHP-错误处理
    PHP-文件加载
  • 原文地址：https://www.cnblogs.com/alexxs/p/5803848.html
Copyright © 2011-2022 走看看