angularJS中directive与directive 之间的通信
上一篇讲了directive与controller之间的通信；但是我们directive与directive之间的通信呢？
当我们两个directive嵌套使用的时候怎么保证子directive不会被父directive替换覆盖；及当子directive需要用到父directive中controller某个变量或者方法的时候
怎么实现两个directive之间的通信的。
这里主要讲directive的两个属性：
1.transclude
2.require
html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>angular-directive3</title>
<script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
<style type="text/css">
#id1 {
width: 200px;
height: 100px;
border: 1px solid #005599;
}
#id2 {
width: 100px;
height: 50px;
margin: 5px;
border: 1px dotted #cccccc;
}
</style>
</head>
<body ng-app="demoDrt"> <deep-drt forid="id1">
<inner-drt forinnerid="id2"></inner-drt>
</deep-drt> </body>
</html>
js
var demoDrt = angular.module('demoDrt', []);
demoDrt.directive('deepDrt', function() {
return {
restrict:'AE',
replace:true,
scope : {
forid : '@'
},
//加上transclude属性true之后在template中结合ng-transclude指令就不会替换子directive，
// 如果嵌套有自定义指令而没加transclude属性的话子directive会被父directive的template替换掉
transclude:true,
//如果有子directive要使用父directive中controller的值的话变量和函数的定义则要使用this来绑定，$scope绑定的话只会在当前作用域生效
controller:['$scope', function($scope) {
//这个this输出的其实就是controller对象
this.name = 'angular';
this.version = '1.4.6';
}],
//template 上结合ng-transclude使用，如果ng-transclude放在template的父级的话，
// 那么template里面的值会被子directive覆盖，所以我们要用一个dom并加上ng-transclude来在外层包裹子directive。
template:'<div id="{{forid}}">deepDrt<div ng-transclude></div></div>'
};
});
demoDrt.directive('innerDrt', function() {
return {
restrict:"AE",
replace:true,
//require主要作用是寻找父directive,'^'表示向上寻找，后面加上父directive的名字，'?'表示如果找不到的话则不会报错,
// 一般'^?'两个结合使用当找不到父directive的时候angular不会报错
//结合了require 则在子directive的link属性中加上reController，则可以获取父directive中controller的变量和方法
require: '^?deepDrt',
scope : {
forinnerid : '@'
},
link : function(scope, element, attr, reController) {
console.log(scope);
console.log(attr);
//reController得到了父controller中绑定的变量和函数
element.bind('click', function(e) {
console.log(e.target);
e.target.innerText = reController.name + '-' + reController.version;
});
},
template : '<div id="{{forinnerid}}">innerDrt</div>'
}
});
directive生成页面结构
通过transclude:true同时在template中结合ng-transclude指令我们能把子directive嵌套在父directive中；而我在注释中也提到了，如果ng-transclude外没有一个dom包裹
子directive的话那字directive也是会被父directive的template替换的。
在子directive中require:'^?deepDrt'；具体含义在注释中已经说明。值得注意的是父directive中的controller中定义的变量如果要给子directive使用的话要用this来绑定变量或者方法，this指的就是controller这个对象。子directive中reController得到的就是这个controller对象，从而得到父directive中this定义的变量和属性。
关于angularJS directive之间的通信就这么多;不对之处希望大家指正。谢谢！
angularJS中directive与directive 之间的通信的更多相关文章
- angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
- AngularJS进阶(九)控制器controller之间如何通信
AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...
- Android中BroadCast与Activity之间的通信
在看本文之前,假设你对于Android的广播机制不是非常了解.建议先行阅读我转载的一篇博文:图解 Android 广播机制. 因为本案例比較简单,故直接在此贴出代码,不做过多的阐述. 先上效果截图: ...
- Android中两个Activity之间简单通信
在Android中,一个界面被称为一个activity,在两个界面之间通信,采用的是使用一个中间传话者(即Intent类)的模式,而不是直接通信. 下面演示如何实现两个activity之间的通信. 信 ...
- angularjs 中 Factory,Service,Provider 之间的区别
本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...
- Android中Service和Activity之间的通信
启动Service并传递数据进去: Android中通过Intent来启动服务会传递一个Intent过去. 可以在Intent中通过putExtra()携带数据 Intent startIntent ...
- AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？
最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...
- Python_架构、同一台电脑上两个py文件通信、两台电脑如何通信、几十台电脑如何通信、更多电脑之间的通信、库、端口号
1.架构 C/S架构(鼻祖) C:client 客户端 S:server 服务器 早期使用的一种架构,目前的各种app使用的就是这种架构,它的表现形式就是拥有专门的app. B/S架构(隶属于C/ ...
- AngularJS中转换响应内容
从远程API获取到的响应内容,通常是json格式的,有时候需要对获取到的内容进行转换,比如去除某些不需要的字段,给字段取别名,等等. 本篇就来体验在AngualrJS中如何实现. 在主页面,还是从co ...
随机推荐
- 20145220&20145209&20145309信息安全系统设计基础实验报告（2）
20145220&20145209&20145309信息安全系统设计基础实验报告(2) 实验报告链接: http://www.cnblogs.com/zym0728/p/6083664 ...
- visual stdio 2015安装配置及原理
安装与配置: 1.先配置好IIS,再安装visual stdio,主要原因系统会自注册.net Framework,若顺序不正确,则需手动注册,步骤: a. IIS可承载的Web核心 b. IIS6 ...
- laravel的门面模式
核心技术是__callStatic()方法,当调用的方法不存在时,会自动调用魔术方法__callStatic()方法,和__autoload()方法同工异曲.
- PCB上过孔via钻孔的直径如何设置 是任意的吗 谈谈PCB钻孔工艺及规格
PCB上过孔via钻孔的直径如何设置,是不是可以随便填入一个直径尺寸就行了?比如我的走线宽度是6mil,那我的via过孔直径也设置为6mil,节约布线空间岂不是更好?这样的设计板厂是否都能按照设计规格 ...
- slick for play 使用原生sql查询以及拼接sql
在play中用函数式框架slick来操作数据库是一件很爽的事情.但有时因为某些特殊场景又不得不用原生的sql了. 还好slick支持这种写法,可以看看slick官方文档,Slick Plain SQL ...
- Spark1.6.2 java实现读取json数据文件插入MySql数据库
public class Main implements Serializable { /** * */ private static final long serialVersionUID = -8 ...
- sprint2总结
在sprint第二阶段的学习过程中,前期和后期在学校网络的支持下我们成功的延迟了把代码上传github的时间,在我们自己感觉上看,完成项目的质量比较理想,在经过sprint第一阶段的学习后,部分上的问 ...
- pdf拆分与合并
1.引用iTextSharp,用于拆分和合并pdf文件 using iTextSharp.text; using iTextSharp.text.pdf; 2.合并pdf //outMergeFile ...
- shell十三问
1) 为何叫做 shell ?在介绍 shell 是甚幺东西之前,不妨让我们重新检视使用者与计算机系统的关系:图(FIXME)我们知道计算机的运作不能离开硬件,但使用者却无法直接对硬件作驱动,硬件的驱 ...
- spark读取hbase数据
def main(args: Array[String]): Unit = { val hConf = HBaseConfiguration.create(); hConf.set("hba ...