angular : direative ：comunication 指令之间的通讯
在网络上可以找到多种指令之间的通讯
· $on，$emit，$boardcast （向上或向下冒泡）
· 指令return的required （^）向上一个scope通讯，前提要先给scope一个name
· 建立一个factory，让需要通讯的指令依赖注入factory服务
以上都可以解决通讯问题，但是在不同的状况下还是会遇到代码阅读上的问题
今天遇到的问题是当指令A的child的指令B要和指令A通讯，同时指令C（不在指令A的child）要和指令A通讯
最终决定使用$on和$boardcast的方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>思涂客 Stooges</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script> <script>
angular.module("app", []).
directive("myParent", [function () {
return {
restrict: "E",
link: function (scope) { },
controller: ["$scope", function ($scope) {
var that = this;
$scope.name = "parent";
that.alert = function () {
$scope.name = "alert";
}
$scope.$on("Main.myParent.alert", function (e, fn) {
fn(that);
});
}],
scope: true,
name: "myParent"
}
}]).
directive("myChild", [function () {
return {
restrict: "E",
require: "^myParent",
link: function (scope, elem, attrs, myParent) {
//myParent.alert();
}
}
}]).
directive("myOutputSide", ["$rootScope", function ($rootScope) {
return {
restrict: "E",
link: function (scope, elem, attrs) {
$rootScope.$broadcast("Main.myParent.alert", function (scope) {
scope.alert();
});
}
}
}]); </script> </head>
<body ng-app="app">
<my-parent data-xx="{{name}}">
<my-child></my-child>
</my-parent>
<my-output-side></my-output-side>
</body>
</html>
myParent 指令A
myChild 指令B
myOutputSide 指令C
指令A和指令B通讯方法：在指令A给ctrl一个name，这样在指令B就可以通过required调用指令A的ctrl
指令A和指令C通讯方法：在指令C依赖注入$rootscope，然后向下冒泡找到Main.myParent.alert，这在指令A是写好，同时需要一个参数scope。这样就能很好的通讯了，如果指令B和C都要改变指令A的scope，通过以上方法可以到达不重复代码！
angular : direative ：comunication 指令之间的通讯的更多相关文章
- angular : direative : scope | 指令scope和transclude的关系
今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...
- angular : direative : scope | 指令scope里的符号@，=
先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...
- Angular 学习笔记——模块之间的通讯
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...
- AngularJs-指令和指令之间的交互（动感超人）
前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...
- DLL与EXE之间的通讯调用 以及 回调函数的线程执行空间
dll 与 exe 之间的通讯方式有很多种, 本文采用回调函数的方法实现, 本文也将研究多线程,多模块的情况下,回调函数所在的线程, 啥也不说了,先附上代码: 下面的是dll模块的的, dll的工程文 ...
- angular 表达式与指令
angular表达式的一些特点 属性表达式: 属性表达式是对应于当前作用域,Javascript对应的是全局window对象. AngularJS要使用window作用域的话得用$window来指向全 ...
- Angular10 组件之间的通讯
1 父组件和子组件之间的通讯 2 利用中间组件实现两个组件之间的通讯 3 利用服务实现两个组件之间的通讯 2017年8月26日20:09:13 待更新... 1 组件之间的关系图 1.1 父子关系 1 ...
- java 中多线程之间的通讯之生产者和消费者 （多个线程之间的通讯）
在真实开发 中关于多线程的通讯的问题用到下边的例子是比较多的 不同的地方时if 和while 的区别 如果只是两个线程之间的通讯,使用if是没有问题的. 但是在多个线程之间就会有问题 /* * 这个例 ...
- Socket网络通讯开发总结之：Java 与 C进行Socket通讯 + [备忘] Java和C之间的通讯
Socket网络通讯开发总结之:Java 与 C进行Socket通讯 http://blog.sina.com.cn/s/blog_55934df80100i55l.html (2010-04-08 ...
随机推荐
- 移动硬盘/U盘装Windows 7旗舰版（VHD版）
真正的移动版WIN7,在移动硬盘/U盘上运行的WIN7 工具准备 - 联想Y450本本,已安装Windows 7旗舰版(或者WINPE3.0版),用来给移动WIN7做引导 -Win7.vhd,15G, ...
- mvn常用指令记录
maven工程版本号更新: -------------------------------------------------------------------------------------- ...
- 浅谈ServletContext
ServletContext是什么? WEB容器在启动时,它会为每个WEB应用程序都创建一个对应的ServletContext对象,它代表当前web应用.ServletConfig对象中维护了Serv ...
- ORA-01555经典错误
--创建undo表空间时固定表空间的大小 sys@TDB112>create undo tablespace undo_small 2 datafile'/u01/app/oracle/ora ...
- Wireshark对常见视频应用的抓包分析的结果
一.PC端直播: YY客户端直播用的udp(P2P)9158客户端直播用的rtp/rtcp 二.Web端直播: YY网页端直播用的tcp9158网页端直播用的tcp六间房网页端直播用的tcp17173 ...
- vue原来可以这样上手
今儿与一群友讨论vue相关问题让我思量极深,1.我们是否在争对性解决问题或者说是帮助别人:2.我们是否在炫耀自己的技能.以下是被戏剧化的对白: "群友":最近按照vue官网示例学习 ...
- python属性查找（attribute lookup）
在Python中,属性查找(attribute lookup)是比较复杂的,特别是涉及到描述符descriptor的时候. 在上一文章末尾,给出了一段代码,就涉及到descriptor与att ...
- 各个浏览器开启CSS Grid Layout的方式
2017年3月,Chrome.Firefox将开启默认支持. 当然对于很多人等不及浏览器默认支持,想提前体验一把,这里提供一些打开方式: 1.Chrome 在浏览器中输入:chrome://flags ...
- 最简单的Linux虚拟机磁盘扩容方法
思路:1.虚拟机增加磁盘容量: 2.将增加的磁盘容量增加到系统分区中: 准备阶段: 下载Gparted软件:https://sourceforge.net/projects/gparted/files ...
- DEVTMPFS
devtmpfs选项保证了系统启动使用临时文件系统.不选会启动出现readonly ,无法启动