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 ...
随机推荐
- FarPoint Spread ChildView子视图
有一种需求场景在很多地方都会用到,就是父子关系(头表和子表的关系),比如订单和订单明细. 做过winform的朋友第spread控件应该比较熟悉,或者了解.他的展示方式就通过一个关联关系就可以了,下面 ...
- PHP 中 static 和 self 的区别
使用 self:: 或者 __CLASS__ 对当前类的静态引用,取决于定义当前方法所在的类: 使用 static:: 不再被解析为定义当前方法所在的类,而是在实际运行时计算的.也可以称之为" ...
- Centos5.5系统备份
使用root用户切换到根目录 然后,使用下面的命令备份完整的系统: tar cvpzf backup.tgz / --exclude=/proc --exclude=/lost+found --exc ...
- The MySQL server is running with the --skip-grant-tables option so it cannot execute this statement
skip-grant-tables下 GRANT ALL PRIVILEGES ON *.* TO helei IDENTIFIED BY 'MANAGER' WITH GRANT OPTION; 执 ...
- xhtmlrenderer渲染pdf，中文换行
在实际开发中,发现在table中显示中文,渲染出来的pdf,中文内容不自动换行.经过搜索发现了一种解决方案,如下: 重写Breaker,修改right计算方式 /* * Breaker.java * ...
- 如何用C语言封装 C++的类，在 C里面使用
本文给出了一种方法.基本思想是,写一个 wrapper文件,把 C++类封装起来,对外只提供C语言的接口,和 C++i相关的都在 wrapper的实现文件里实现. 1. apple.h #ifnde ...
- iOS tabbar点击动画效果实现
正常情况下,我们点击tabbar都只有一个变色效果,但有时候,如果我们想给它添加一个点击动画,该如何做呢? 先上几个效果图: 1.先放大,再缩小 2.Z轴旋转 3.Y轴位移 ...
- 创建 OVS vlan101 并部署 instance - 每天5分钟玩转 OpenStack（139）
前面我们创建了 OVS vlan100 并部署了 instance,今天继续创建 vlan101. subnet IP 地址为 172.16.101.0/24. 底层网络发生了什么变化 Neutron ...
- Ceph QoS 初探（下）
作者:吴香伟 发表于 2017/01/24 版权声明:可以任意转载,转载时务必以超链接形式标明文章原始出处和作者信息以及版权声明 存储QoS是个可以做很大也可以做很小的特性.SolidFire认为将Q ...
- 都能读懂的css3 3D变形效果
css3 3D变形效果 CSS3 transform3D变形 transform的含义是:改变,使-变形:转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换 ...