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 ...
随机推荐
- Python - Headless Selenium WebDriver Tests using PyVirtualDisplay
Here is some Python code showing WebDriver with a virtual display provided by Xvfb: #!/usr/bin/env p ...
- ubuntu系统内核替换
此处将内核由高版本替换成低版本.替换前的系统为ubuntu 12.04 kernel 3.8.0. 替换后的内核版本为2.6.35. 首先下载需要替换的内核文件,下载链接:https://www.ke ...
- HBuilder mui引导页制作
http://www.bcty365.com/content-146-2582-1.html
- HTML 多媒体、Object 元素、音频、视频
Web 上的多媒体指的是音效.音乐.视频和动画. 现代网络浏览器已支持很多多媒体格式. 什么是多媒体? 多媒体来自多种不同的格式.它可以是您听到或看到的任何内容,文字.图片.音乐.音效.录音.电影.动 ...
- CodeForces 460B
Little Dima and Equation Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- Android中的IPC机制
Android IPC简介 IPC是Inter-Process Communication的缩写,含义就是进程间通信或者跨进程通信,是指两个进程之间进行数据交换的过程.那么什么是进程,什么是线程,进程 ...
- 汇编实现HelloWorl！
hello word~ ASSUME CS:CODE,DS:DATA DATA SEGMENT DB "HELLO WORLD" ;存储要显示的数据 DATA ENDS CODE ...
- ES2：ElasticSearch 集群配置
ElasticSearch共有两个配置文件,都位于config目录下,分别是elasticsearch.yml和logging.yml,其中,elasticsearch.yml 用来配置Elastic ...
- js之Math对象
; var num1 = Math.floor(num); // 向下取整 var num2 = Math.ceil(num); // 向上取整 document.write(num2+'-<b ...
- 关于a.b和a[b]的区别
在写代码的过程中,我们经常可以看到a.b或啊a[b],但是他们有什么区别呢: 简单说一下吧,有自己的还用群友的大力支持! 在js的对象中 var arr = {a:"b",b:&q ...