转载自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. Shell 脚本编程笔记（一） Hello Shell

    最近不断在接触Linux操作系统,对它一个终端走天下的特性感到十分新奇和伟大.同时也被各种命令折磨的死去活来...公司的一个老同事给我讲,在公司的极品geek宅都是只用一个黑黑的框完成一切的.结果我一 ...

  2. 理解javascript之 对象

    大纲: 1.介绍attribute property的异同,翻译自http://javascript.info/tutorial/attributes-and-custom-properties#pr ...

  3. Build Android-x86 ICS 4 Virtualbox from Google Virtualbox Target and Intel Kernel 编译体验

    最近一直在研究android源码的编译,应该说研究的很辛苦,最难的是下源码,总是不停的断掉,最后感谢公司的高网速,找到方法后12G的源码只花了1个小时就下完了. 参考以下网址:http://softw ...

  4. ls命令解析

    ls 列出目录的内容.它可是我们所经常使用的命令,那么你了解它所有的功能吗?下面让我们来看看吧! 命令格式 ls [OPTION]... [FILE]... 参数说明 -a , --all 显示所有文 ...

  5. Hibernate4 clob字段存取

    domain的字段: private Clob content; hibernate的xml映射 <property name="content" type="cl ...

  6. javascript写的ajax请求

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  7. JS冒泡事件与处理

    JavaSciprt事件中有两个很重要的特性:事件冒泡以及目标元素. 事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发.这 一过程被 ...

  8. php while循环 指定显示内容 例如不想显示前10条和后10条

    <?php //查询信息总的条数 $db_num = query_num("表","where 1=1"); //每页显示的条数 $page_size=2 ...

  9. Oracle归档日志定时删除任务

    1.在Oracle账号下,创建归档日志删除文件del_arch.sh 文件位置:/home/oracle/crontabOra,内容如下: #!/bin/bash LOG_DIR=/home/orac ...

  10. xcode5 自定义模板

    经过一番周折,终于在xcode5上实现了一个简单的自定义模板,在项目中集成NSLogger库(增强NSLog的功能,https://github.com/fpillet/NSLogger)——新建项目 ...