前言:

  上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法。本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的demo,我们可以借鉴学习。

1,动感超人

  

上面的三个按钮,代表三个超人,在此想问下,哪些想看超人的朋友们是不是有种被骗了的感觉?

当我们的鼠标移动到哪个超人的身上的时候,就会输入这个超人所拥有的超能力(力量 + 敏捷 + 发光)

<!DOCTYPE html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>指令之间的交互</title>
</head>
<body>
<div class="row">
<div class="col-md-3">
<superman strength>动感超人---力量</superman>
</div>
<div class="col-md-3">
<superman strength speed>动感超人2---力量+敏捷</superman>
</div>
<div class="col-md-3">
<superman strength speed light>动感超人3---力量+敏捷+发光</superman>
</div>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-directive.js"></script>
</html>

ok,我们先创建了四个指令,一个是通过 E 的模式创建的叫做 superman,另外三个是通过 A 模式创建的 (strength、speed和light)。

var myModule = angular.module('MyModule',[]);
myModule.directive('superman',function(){
return{
scope:{},
restrict:'AE',
controller:function($scope){
$scope.abilities=[]; this.addStrength=function(){
$scope.abilities.push("strength");
}; this.addSpeed = function(){
$scope.abilities.push('speed');
}; this.addLight = function(){
$scope.abilities.push('light');
}
},
link:function(scope,element,attrs){
element.addClass('btn btn-primary');
element.bind('mouseenter',function(){
console.log(scope.abilities);
})
}
}
});
myModule.directive('strength',function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtl){
supermanCtl.addStrength();
} }
})
myModule.directive('speed',function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtl){
supermanCtl.addSpeed();
}
}
})
myModule.directive('light',function(){
return{
require:'^superman',
link:function(scope,element,attr,supermanCtl){
supermanCtl.addLight();
}
}
})

上面的代码,最主要的就是 superman的这个指令,里面有些我们还没有认识的元素,我们下面介绍下:

  • scope:{}这个是创建一个独立的作用域。
  • controller,这个和我们angular中的控制器有些不同,这个主要是写一些指令的对外方法。

好,我们再来介绍下面的三个指令,我们就说一个就好了,其它的都一样的。

在这三个控制器也有新增的东西:

  • require:"^superman",这个是告诉angularJS,当前的指令,依赖于哪个指令。我们现在的  strength指令依赖于superman的指令
  • link方法中的第四个参数,叫做父控制器,只要是指令写了require参数,就可以使用这个参数了,它可以访问父级contorller的方法中提供的一些属性和方法。

2,总结

  我们从代码上可以看出,我们的三个超人拥有超能力多少是和拥有的指令多少成正比的。他们都有一个父的指令,父指令提供了超能力的力量(我们可以理解为数据)。子指令控制了是否追加这些功能。

AngularJs-指令和指令之间的交互(动感超人)的更多相关文章

  1. 【angularJS】Directive指令

    AngularJS 通过被称为 指令 的新属性来扩展 HTML.指令是扩展的 HTML 属性,带有前缀 ng-. 内置指令 1.ng-app 指令初始化一个 AngularJS 应用程序. 定义了 A ...

  2. 【AngularJS】—— 11 指令的交互

    前面基本了解了指令的相关内容: 1 如何自定义指令 2 指令的复用 本篇看一下指令之间如何交互.学习内容来自<慕课网 指令3> 背景介绍 这例子是视频中的例子,有一个动感超人,有三种能力, ...

  3. --@angularJS--指令与指令之间的交互demo

    1.index.html: <!DOCTYPE HTML><html ng-app="app"><head>    <title>c ...

  4. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  5. angularJS在创建指令需要注意的问题(指令中使用ngRepeat)

    现在发现,当初的自己真的是太菜了,为什么你在指令中更改数据,没有作用呢?这其实是原型链的问题. 详细的我就不在这里说了,有位大神早已发布了这个内容,在这里复制个地址给大家,有兴趣的可以看看 http: ...

  6. 关于Angularjs写directive指令传递参数

    包子又来啦.... 在Angularjs当中,我们可能会经常要写directive指令.但是指令如果要共用的话,肯定是有细微的差别的,所以这些差别可能需要一个参数来决定 所以如何在指令中传递参数呢.. ...

  7. angularjs学习之六(angularjs中directive指令的一般编程事件绑定 模板使用等)

    angular js 中模板的使用.事件绑定以及指令与指令之间的交互 相应教学视频地址(需FQ):v=aG8VD0KvUw4">angularjs教学视频 <!doctype h ...

  8. AngularJS中的指令全面解析(转载)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  9. Ⅵ.AngularJS的点点滴滴-- 指令

    指令 基本用法 <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angul ...

随机推荐

  1. 【Android UI设计与开发】4.底部菜单栏(一)Fragment介绍和简单实现

    TabActivity在Android4.0以后已经被完全弃用,取而代之的是Fragment.Fragment是Android3.0新增的概念,Fragment翻译成中文是碎片的意思,不过却和Acti ...

  2. ZOJ 3157 Weapon --计算几何+树状数组

    题意:给一些直线,问这些直线在直线x=L,x=R之间有多少个交点. 讲解见此文:http://blog.sina.com.cn/s/blog_778e7c6e0100q64a.html 首先将直线分别 ...

  3. UVALive 6470 Chomp --记忆化搜索

    题意:给一个只有三行的方块阵(横向最多100个),然后p,q,r分别代表第1,2,3层的方格数,两人轮流去掉一个格子,此时这个格子的右上方都会被去掉,面临只剩最左下角的一个格子的状态的人输,问先手能否 ...

  4. 2014 Super Training #9 C E - Cup 2 --记忆化搜索

    原题:ZOJ 3681 http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3681 题意:给一个m,n,m表示m个人,可以把m个 ...

  5. AC日记——过河卒 洛谷 1002

    题目描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. ...

  6. java 20 - 6 加入了异常处理的字节输出流的操作

    昨天坐了十几个钟的车回家,累弊了.... ————————————割掉疲劳————————————— 前面的字节输出流都是抛出了异常不管,这次的加入了异常处理: 首先还是创建一个字节输出流对象,先给它 ...

  7. .net 4.0 自定义本地缓存策略的不同实现

    在分布式系统的开发中,为了提高系统运行性能,我们从服务器中获取的数据需要缓存在本地,以便下次使用,而不用从服务器中重复获取,有同学可能要问,为什么不使用 分布式缓存等,注意,服务器端肯定是考虑到扩展, ...

  8. Caffe学习系列(17):模型各层数据和参数可视化

    cifar10的各层数据和参数可视化 .caret,.dropup>.btn>.caret{border-top-color:#000!important}.label{border:1p ...

  9. Activiti系列: 如何添加自定义表单引擎

    这个功能挺有意思的,有了它,就可以不适用html的方式来展示表单了,比如可以用swing对象了 class MyFormEngine implements FormEngine {     @over ...

  10. Python之socket(套接字)

    Socket 一.概述 socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. ...