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 ...
随机推荐
- IOC容器Unity的使用及独立配置文件Unity.Config
[本段摘录自:IOC容器Unity 使用http://blog.csdn.net/gdjlc/article/details/8695266] 面向接口实现有很多好处,可以提供不同灵活的子类实现,增加 ...
- jQuery动画高级用法（上）——详解animation中的.queue()动画队列插队函数
决定对animate方面做一些总结,希望能给大家一些启发和帮助 从一个实际应用谈起 今天不谈animate().fadeIn().fadeOut().slideUp().show().hide()诸如 ...
- 【angularjs】【学习心得】路由继续研究篇
原文:http://www.imooc.com/wenda/detail/236998 其实路由的功能是比较复杂的,我们实际应用中页面的状态也是非常多的,上面简单的路由是肯定不能满足我们的需求的,所以 ...
- 【翻译】在Visual Studio中使用Asp.Net Core MVC创建第一个Web Api应用（二）
运行应用 In Visual Studio, press CTRL+F5 to launch the app. Visual Studio launches a browser and navigat ...
- 决策树ID3算法
决策树 (Decision Tree)是在已知各种情况发生概率的基础上,通过构成 决策树 来求取净现值的期望值大于等于零的概率,评价项目风险,判断其可行性的决策分析方法,是直观运用概率分析的一种图解法 ...
- python访问sqlserver
#coding=utf-8 #!/usr/bin/env python#---------------------------------------------------------------- ...
- spring mvc controller中获取request head内容
spring mvc controller中获取request head内容: @RequestMapping("/{mlid}/{ptn}/{name}") public Str ...
- mongo db 启动停止
1.下载压缩包,解压,bin目录放在path中: 2.cmd中输入mongod --dbpath d:\xx\yy\data 启动了 3.如果错误关闭,到d:\xx\yy\data中删除.lock文件 ...
- Bootstrap入门（二十五）JS插件2：过渡效果
Bootstrap入门(二十五)JS插件2:过渡效果 对于简单的过渡效果,只需将 transition.js 和其它 JS 文件一起引入即可.如果你使用的是编译(或压缩)版的bootstrap.js ...
- IEcss样式，行高的问题
input的文本内容显示一定要用line-height,不然会出现内容错位的问题