转载自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. 【windows开发实现记事本程序——逻辑篇1】

    1. 主要内容 从本节开始介绍windows开发实现记事本程序的逻辑实现部分.本节的主要内容有以下3点: 1. 主窗口定义  -- 主要介绍记事本主界面窗口对应的窗口类及实现方案 2. RichEdi ...

  2. [置顶] css 背景透明，文字不透明，alpha滤镜，opacity，position:relative;

    都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题 但是在position为absolute这么做却没有效果,怎么解决 ...

  3. Xshell下漂亮的开发环境配置

    今天折腾了一天Xshell配置Linux命令行开发环境. 总结几点: 1.Xshell配色方案,这是我自己调的个人使用版,网上比较好的版本有Solarized Dark,可以下载到. [ColorFo ...

  4. ubantu-命令-进入超级用户

    sudo su; 建立文件夹 mkdir ulike_work;

  5. 小议window.event || ev

    以前做项目时就遇到这个问题,但是太懒没有总结,今天来总结一下 onclick="alert(arguments.callee)"这句随便放在某个元素中,试试不同的浏览器会有弹出什么 ...

  6. 初涉JavaScript模式 (12) : 沙箱模式

    引子 上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了JSe ...

  7. Python学习笔记四--字典与集合

    字典是Python中唯一的映射类型.所谓映射即指该数据类型包含哈希值(key)和与之对应的值(value)的序列.字典是可变类型.字典中的数据是无序排列的. 4.1.1字典的创建及赋值 dict1={ ...

  8. CSS中.和#区别

    一.问题来源 制作导航栏,参考别人的代码,发现的. 二.解析 2.1 概述 id:用来定义页面中大的样式,如栏目划分,顶部,正文,底部等:用#top的形式来定义: class:用来定义一些比较细节的样 ...

  9. org/springframework/core/MethodClassKey

    解决下面报错的办法: 把pom.xml中下面两个dependency的version去掉. <dependency> <groupId>org.springframework& ...

  10. 那些SQL语句

    根据book_id,class_id确定老师uid select user_id from lessons left join book on lessons.lesson_id = book.les ...