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

· $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. MySQL——数据类型

    MySQL中定义数据字段的类型对你数据库的优化是非常重要的.MySQL支持多种类型,大致可以分为三类:数值.日期/时间和字符串(字符)类型. 一.字符串类型: 字符串类型指CHAR.VARCHAR.B ...

  2. 用JS添加文本框案例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. php sprintf函数

    定义和用法 sprintf() 函数把格式化的字符串写写入一个变量中.sprintf(format,arg1,arg2,arg++) 参数 描述 format 必需.转换格式. arg1 必需.规定插 ...

  4. ssh框架整合log4j

    这个是摘录的别人博客的地址,请点击下面的链接...... http://www.cnblogs.com/rushoooooo/archive/2011/08/29/2157361.html

  5. #搜索# #BFS# #优先队列# ----- OpenJudge鸣人和佐助

    OpenJudge 6044:鸣人和佐助 总时间限制: 1000ms  内存限制: 65536kB 描述 佐助被大蛇丸诱骗走了,鸣人在多少时间内能追上他呢? 已知一张地图(以二维矩阵的形式表示)以及佐 ...

  6. 关于oracle导出时的query用法

    QUERY参数后面跟的是where条件,值得注意的是,整个where子句需要使用""括起来,where子句的写法和SELECT中相同: 如果是UNIX平台所有"和'都需 ...

  7. 怎样在iis中发布asp.net网站

    以windows server2003.vs2008和sql servber2005为例.将开发完成的asp.net网站发布,将发布包放在windows server2003服务器的文件夹下.将web ...

  8. session的一些方法

    session的一些方法: package com.stono.servlet.listenerorder; import java.io.IOException; import java.io.Pr ...

  9. Bootstrap入门（五）表单

    Bootstrap入门(五)表单   先引入本地的CSS文件  <link href="css/bootstrap.min.css" rel="stylesheet ...

  10. css之描点定位方式

    <!-- 描点定位的两张方式 --> <!-- 1.通过id定位 --> <!-- 2.通过name定位 只能用a--> <div> <a hre ...