上一篇讲了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 之间的通信的更多相关文章

  1. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  2. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  3. Android中BroadCast与Activity之间的通信

    在看本文之前,假设你对于Android的广播机制不是非常了解.建议先行阅读我转载的一篇博文:图解 Android 广播机制. 因为本案例比較简单,故直接在此贴出代码,不做过多的阐述. 先上效果截图: ...

  4. Android中两个Activity之间简单通信

    在Android中,一个界面被称为一个activity,在两个界面之间通信,采用的是使用一个中间传话者(即Intent类)的模式,而不是直接通信. 下面演示如何实现两个activity之间的通信. 信 ...

  5. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  6. Android中Service和Activity之间的通信

    启动Service并传递数据进去: Android中通过Intent来启动服务会传递一个Intent过去. 可以在Intent中通过putExtra()携带数据 Intent startIntent ...

  7. AngularJs中，如何在父元素中调用子元素为自定义Directive中定义的函数？

    最近一段时间准备使用AngularJs中的自定义Directive重构一下代码. 在这里说明一下,把自定义控件封装成Directive并不一定是要复用,而是要让代码结构更加清晰.就好像你将一个长方法拆 ...

  8. Python_架构、同一台电脑上两个py文件通信、两台电脑如何通信、几十台电脑如何通信、更多电脑之间的通信、库、端口号

    1.架构 C/S架构(鼻祖) C:client  客户端 S:server  服务器 早期使用的一种架构,目前的各种app使用的就是这种架构,它的表现形式就是拥有专门的app. B/S架构(隶属于C/ ...

  9. AngularJS中转换响应内容

    从远程API获取到的响应内容,通常是json格式的,有时候需要对获取到的内容进行转换,比如去除某些不需要的字段,给字段取别名,等等. 本篇就来体验在AngualrJS中如何实现. 在主页面,还是从co ...

随机推荐

  1. asp.net core项目发布网站时的选项

    发布网站时的选项 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序. Release 称为发布版本,它往往是进行了各种优化,使得程序在代码大小和运行速度上都是最优的, ...

  2. TCP3次握手连接协议和4次握手断开连接协议

    TCP/IP 状态机,如下图所示: 在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接,如图1所示. (SYN包表示标志位syn=1,ACK包表示标志位ack=1,SYN+A ...

  3. 接口测试之基于LoadRunner的一个简单示例

    这几天一直在捣鼓接口测试,以下总结一下: 1.什么是接口测试:接口是指系统模块与模块之间或者系统与系统之间进行交互,一般我们用的多的是HTTP协议的接口.WebService协议的接口.还有RPC(R ...

  4. C++学习笔记 指针与引用

    指针与引用  1. 指针 (1) 指针是一个变量(实体),存储的是一个地址,指向内存的一个存储单元,指针可以为空 (2) 指针可以为空,在声明定义时可以不初始化 (3) 指针在初始化之后可以重新指向其 ...

  5. Single Responsibility Principle 单一职责原则

  6. Windows下通过socket进行字符串和文件传输

    今天在windows平台下,通过socket实现了简单的文件传输.通过实现这一功能,了解基本的windows网络编程和相关函数的使用方法. 在windows平台上进行网络编程,首先都需要调用函数WSA ...

  7. 【C# 基础应用】我的第一个App，不容易——随机生成小人网站，asp.net core

    Index page Welcome page 生成很多不同的小人哦~我是如何实现这么stupid but interesting的程序呢?我用了ASP.NET Core 画小人的话,用了一个很stu ...

  8. 虚拟机下CentOS 6.5配置IP地址的三种方法

    实验软件环境:虚拟机Vmware Workstation10.0 .CentOS 6.5 32位 1.自动获取IP地址 虚拟机使用桥接模式,相当于连接到物理机的网络里,物理机网络有DHCP服务器自动分 ...

  9. ffmpeg将图片合成视频

    本来想做个android录制屏幕的功能,但是目前只能是截图 然后把图片合成视频,这里就需要用到 ffmpeg 在做之前也是参考了其它一些比较不错的文章 比如:http://www.open-open. ...

  10. tomcat 默认目录修改

    引用:http://andrewyu.blog.51cto.com/1604432/544659 Tomcat7跟以前的版本一样,默认的发布程序是/usr/local/tomcat/webapps/R ...