转载自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里面定义了很多方法，这些方法就能提供给外面的一些指令使用，这样就能形成指令的嵌套使用。

《AngularJS》--指令的相互调用的更多相关文章

  1. angularjs 指令间相互调用

    <div ng-app="app"> <div ng-controller="myctl"> <button superman s ...

  2. AngularJS指令进阶 – ngModelController详解

    AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...

  3. AngularJS指令

    1. AngularJS指令的特点: AngularJS通过被称为指令的新属性来扩展HTML,指令的前缀为ng-. AngularJS通过内置的指令来为应用添加功能. AngularJS允许你自定义指 ...

  4. angularjs 指令—— 绑定策略（@、=、&）

    angularjs 指令—— 绑定策略(@.=.&) 引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到 ...

  5. angularjs指令(二)

    最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 angula ...

  6. angularJs指令执行的机制==大概的三个阶段

    第一阶段:加载阶段 angularJs要运行的话,需要去等待angular.js加载完成,加载完之后呢,angular就会去查找到ng-app这个指令,ng-app在每个应用里面只能出现一次, 它也就 ...

  7. AngularJs指令（一）

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  8. 3.4 C与汇编程序的相互调用

    为了提高代码执行效率,内核源代码中有些地方直接使用了汇编语言编制.这就会涉及在两种语言编制的程序之间相互调用的问题. 函数调用包括从一块代码到另一块代码之间的双向数据传递和执行控制转移.数据传递通过函 ...

  9. 【转】angularjs指令中的compile与link函数详解

    这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下   通常大家在 ...

随机推荐

  1. 合（析）取范式转主合（析）取范式--》Java实现

    这次老师布置了如下上机作业,不限语言.思前想后,问了几个大神,说了一堆不知道什么鬼的算法名称.... 经过一番百度,发现Java可以包含库然后使用JavaScript的一些函数,其中eval() 函数 ...

  2. VS2012 ActiveX控件_D接口添加方法事项

    自己写的是Clock控件,所以控件的接口是_DClock 使用向导添加方法后,会在紫色区域自动生成红色代码:(添加Hello方法) dispinterface _DClock { properties ...

  3. 【USACO 2.3.1】最长前缀

    [题目描述] 在生物学中,一些生物的结构是用包含其要素的大写字母序列来表示的.生物学家对于把长的序列分解成较短的序列(即元素)很感兴趣. 如果一个集合 P 中的元素可以通过串联(元素可以重复使用,相当 ...

  4. POJ 1155 树形背包(DP) TELE

    题目链接:  POJ 1155 TELE 分析:  用dp[i][j]表示在结点i下最j个用户公司的收益, 做为背包处理.        dp[cnt][i+j] = max( dp[cnt][i+j ...

  5. oracle触发器应用

    首先给大家推荐两篇我看后的博文,我已经内容转载过来: 1.对触发器的讲解 本篇主要内容如下: 8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建 ...

  6. extjs之TypeError: d.read is not a function解决方案

    在创建如下代码时报出此错:TypeError: d.read is not a function Ext.define('shebyxgl_sheb_model', { extend: 'Ext.da ...

  7. 如何用angularjs制作一个完整的表格之二__表格分页功能

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...

  8. [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战: a) 绑定一个点击方法到这个div,点击后此元素会淡出消失 b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事 ...

  9. 离线安装maven,重新打开eclipse报错处理方法

    报错截图如下 1.eclipse 添加 jre Window -> Preferences -> Java -> Installed JREs If you can’t find a ...

  10. sizeof(int *) 和 sizeof(int)型的大小问题

    小问题,暂时记录注意一下   printf("sizeof(int): %d\n", (int)sizeof(int));     printf("sizeof(int ...