转载自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. 微信返回上一页，页面中的AJAX的请求，对Get请求无效的解决办法

    问题产生原因       最近在做一个微信的项目时,遇到一种很常见的情况,需求是这样的,当用户进入到"我的个人中心"的时候,会有一个点击跳转填写认证资料的按钮,点击此按钮后,会跳转 ...

  2. python自学笔记

    python自学笔记 python自学笔记 1.输出 2.输入 3.零碎 4.数据结构 4.1 list 类比于java中的数组 4.2 tuple 元祖 5.条件判断和循环 5.1 条件判断 5.2 ...

  3. Gson解析json繁杂数据

    碰到json数据.里面格式众多.list+string[]+等等.具体json参数如下: eg:以下为接口参数: "responseData":{ "brandCode& ...

  4. 16 3Sum Closest(输出距离target最近的三个数的和Medium)

    题目意思:给一个数组,给一个target,找三个数的和,这个和要与target距离最近,输出这个和 思路:这个题比3sum要稍微简单一点,如果需要优化,也可以去重,不过因为结果唯一,我没有去重. mi ...

  5. centos下安装cdh5

    http://www.aboutyun.com/thread-9075-1-1.html 基本参考这个   yum clean all yum update     1.保证selinux关闭  /e ...

  6. bind函数

    bind函数把一个本地协议地址赋予一个套接字 对于网际协议,协议地址是32位的IPv4地址或128位的IPv6与16位的TCP或UDP端口号的组合 int bind ( int sockfd, con ...

  7. 一个jpa动态模糊查询的实现

    最近一直在是用spring data jpa,使用起来确实方便,如果是单表的操作基本上通过方法名都可以实现,下面是一个 Specification 实现动态模糊查询的例子这个查询是通过JpaSpeci ...

  8. 温故而知新 C++基本类型

    C++基本类型大小: 在32位计算机中测试得到:sizeof(bool) == 1sizeof(char) == 1 sizeof(short) == 2sizeof(int) == 4sizeof( ...

  9. C语言学习笔记--字符串函数

    字符串函数 需要包含头文件#include<stdio.h> strlen strcmp strcpy strchr strstr strcasestr

  10. Open vSwitch源码阅读【转】及自己的理解【稍后更新】

    http://blog.chinaunix.net/uid-24485075-id-2240075.html