在网络上可以找到多种指令之间的通讯

· $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 指令之间的通讯的更多相关文章

  1. angular : direative : scope | 指令scope和transclude的关系

    今天记入的是指令的scope和transclude关系 a 和 b 都是指令 <div a> <div b></div> </div> a transc ...

  2. angular : direative : scope | 指令scope里的符号@，=

    先看看以下的代码 <body ng-app="app" ng-controller="ctrl"> <dir myname="nam ...

  3. Angular 学习笔记——模块之间的通讯

    <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta http-equiv="C ...

  4. AngularJs-指令和指令之间的交互（动感超人）

    前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...

  5. DLL与EXE之间的通讯调用 以及 回调函数的线程执行空间

    dll 与 exe 之间的通讯方式有很多种, 本文采用回调函数的方法实现, 本文也将研究多线程,多模块的情况下,回调函数所在的线程, 啥也不说了,先附上代码: 下面的是dll模块的的, dll的工程文 ...

  6. angular 表达式与指令

    angular表达式的一些特点 属性表达式: 属性表达式是对应于当前作用域,Javascript对应的是全局window对象. AngularJS要使用window作用域的话得用$window来指向全 ...

  7. Angular10 组件之间的通讯

    1 父组件和子组件之间的通讯 2 利用中间组件实现两个组件之间的通讯 3 利用服务实现两个组件之间的通讯 2017年8月26日20:09:13 待更新... 1 组件之间的关系图 1.1 父子关系 1 ...

  8. java 中多线程之间的通讯之生产者和消费者 （多个线程之间的通讯）

    在真实开发 中关于多线程的通讯的问题用到下边的例子是比较多的 不同的地方时if 和while 的区别 如果只是两个线程之间的通讯,使用if是没有问题的. 但是在多个线程之间就会有问题 /* * 这个例 ...

  9. Socket网络通讯开发总结之：Java 与 C进行Socket通讯 + [备忘] Java和C之间的通讯

    Socket网络通讯开发总结之:Java 与 C进行Socket通讯 http://blog.sina.com.cn/s/blog_55934df80100i55l.html (2010-04-08 ...

随机推荐

  1. Bzoj 1936

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1396 题解:待更 代码:待更 开始时间: 结束时间:

  2. NodeMCU之旅（三）：响应配置按钮

    引言 在之前的代码中,要连接的WIFI信息都已写死在代码里,这显然不能适应我们的需求.所以需要想个办法让用户可以配置这些信息. WIFI工作模式 NodeMCU支持STATION,SOFTAP,STA ...

  3. JavaSwing JScrollPane的使用

    JavaSwing JScrollPane的使用: 参考:http://duyz.blog.ifeng.com/article/340649.html package com.srie.test; i ...

  4. 负载均衡软件LVS分析二(安装)

    一.  安装LVS软件 1．安装前准备工作操作系统:统一采用Centos4.4版本.地址规划,如表1所示:表1 更详细的信息如图2所示: 图2  LVS DR模式安装部署结构图 图2中的VIP指的是虚 ...

  5. css3 小图标提示特效

    最近的计划,就是每天来几个特效,当然这里有限制,在什么候选区只能放一个,还每天有限制发布的,哎, 啊 终于写完了,看到一个挺好玩的东西,想到能不能用网页的特效做出来,试试呗!不过,一想肯东有很多的 相 ...

  6. Java偏向锁实现原理(Biased Locking)

    http://kenwublog.com/theory-of-java-biased-locking 阅读本文的读者,需要对Java轻量级锁有一定的了解,知道lock record, mark wor ...

  7. 大大维的游戏机计划3--2048v1

    前几天由于忙着过年串门,游戏机的计划搁置了几天.这两天终于空出了一块时间,抽空写了2048. 由于笔者前面自制了一个类似2048的游戏,所以写起来也算是轻车熟路,花了两个晚上也就差不多了. 废话少说, ...

  8. 在C++中反射调用.NET（一）

    为什么要在C++中调用.NET 一般情况下,我们常常会在.NET程序中调用C/C++的程序,使用P/Invoke方式进行调用,在编写代码代码的时候,首先要导入DLL文件,然后在根据C/C++的头文件编 ...

  9. Win下 MySQL数据库安装与配置详解

    第一步 从官网下载安装包 (本次只写安装版的32位的mysql) 1. https://www.mysql.com/downloads/ 下载的官网地址 一直滑到最下面 然后点第一个 然后选第一个 这 ...

  10. RAS 加密 解密

    蚂蚁金服电话面试时,问到了RAS加密解密,感觉回答的有点模糊,遂写个例子加深一下印象 package cheng.test.cipher;import java.io.FileInputStream; ...