转载自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. ASP.NET菜鸟之路之登录系统

    背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. 网站介绍 根据书上的例子做了一个比较粗糙的登录例 ...

  2. Linux挂载U盘

    在将硬盘插到Linux系统上,打开硬盘时一直提示:unknown filesystem type 'ntfs'. 1.安装gcc,提供编辑环境 yum -y install gcc 2.下载ntfs- ...

  3. C++ 实现网络爬虫

    吐槽 前天心血来潮, 把自己面试经历下了下来. 我觉得自己求职一路来比较心酸, 也付出了比一般人更多的汗水. 本以为写出来, 好歹可以作为一篇励志故事. 得到的评论却是, 语言只是一门工具. ||| ...

  4. java-二分查找法

    package search; public class BinarySearch { public static void main(String[] args) { , , , , , , , , ...

  5. python运维开发之第五天

    一.模块五大部分 定义,导入方法,import本质(路径搜索),导入优化,模块的分类 1.定义: 模块是用来从逻辑上组织python代码(变量,函数,类,逻辑实现一个功能),本质就是.py结尾的pyt ...

  6. Python新手学习基础之函数-lambda函数

    lambda函数 在Python里除了用def定义函数外,还有一种匿名函数,也就是标题所示的lambda函数,它是指一类无需定义标识符(函数名)的函数或子程序. lambda函数的使用语法如下: la ...

  7. poj2255 (二叉树遍历)

    poj2255 二叉树遍历 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   Descripti ...

  8. linux浏览器,邮件客户端,输入法,双屏设置,应用软件,scrot -s截图,office

    搜狗输入法linux版:http://pinyin.sogou.com/linux/help.php win/linux同时支持比较好用的浏览器:maxthon,firefox,maxthon,ope ...

  9. 【数学】【模拟】XMU 1044 伪伪随机数产生器

    题目链接: http://acm.xmu.edu.cn/JudgeOnline/problem.php?id=1044 题目大意: 求首项为0,公比为x的等差数列组成的数字条的第y位数字是几.(x,y ...

  10. C语言---递归反向输出任意长度的字符串

    (该字符串可以包含空格和回车!) [题目要求] 编写一个递归函数,实现将输入的任意长度的字符串反向输出的功能. 例如输入字符串:ABCD,输出字符串:DCBA. [题目分析] 应用递归的思想有时可以很 ...