本人学了一段时间的angular，angular之间怎样通信，我就总结以下几点，如果有哪位大神认为不对，敬请赐教。

1、父子之间的作用域进行通信

html

<div ng-controller="Parent">

　　{{name}}                                //Parent
　　<div ng-controller="child">
　　　　{{name}}                          //Parent
　　</div>
</div>

js

m1.controller("Parent",["$scope",function($scope){

　　$scope.name = "Parent";
}])
m1.controller("child",["$scope",function($scope){

}])

2、$rootScope 挂在全局作用域上，适用范围更广

html

<div ng-controller="myCtrl">

　　{{name}}                                  //Parent
　　<div ng-controller="Parent">
　　　　{{name}}                            //Parent
　　　　<div ng-controller="child">
　　　　　　{{name}}                      //Parent
　　　　</div>
　　</div>

</div>

js

m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
　　$scope.name = "Parent";
　　$rootScope.name = $scope.name;
}])
m1.controller("child",["$scope",function($scope){
}])

3、基于事件的数据传递  组件 webcomponent

html

<div ng-controller="Parent">

　　<input type="text" ng-model="name" ng-change="change()">  
　　<div ng-controller="child">
　　　　<input type="text" ng-model="name" ng-change="change()">   
　　</div>
　　<div ng-controller="secChild">
　　　　<input type="text" ng-model="name">
　　</div>
</div>

js

m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){

　　// 监听 发送消息  $emit
　　$scope.$on("changeName",function(event,data){
　　　　console.log(data);
　　　　//$broadcast 广播 广播只有子级和自己知道，父级（就是Parent更上级）不知道
　　　　$scope.$broadcast("sendName",data);
　　})

　　//监听 $broadcast 广播发送的消息

　　$scope.$on("sendName",function(event,data){
　　　　console.log(data);
　　　　$scope.name = data;
　　 })
}])
m1.controller("child",["$scope",function($scope){
　　$scope.name = "第一个孩子";
　　$scope.change = function(){
　　　　//$emit 发送 只能发送自己的父级
　　　　$scope.$emit("changeName","发送-》广播");
　　}

　　//监听 $broadcast 广播发送的消息
　　 $scope.$on("sendName",function(event,data){
　　　　console.log(data);
　　　　$scope.name = data;
　　 })
}])
m1.controller("secChild",["$scope",function($scope){
　　$scope.name = "第二个孩子";

　　//监听 $broadcast 广播发送的消息
　　$scope.$on("sendName",function(event,data){
　　　　console.log(data);
　　　　$scope.name = data;
　　})
}])

总结：$emit 发送消息，只能发送给自己的父级或者更上级（如：爷爷级）,使用监听（$on(监听的名字,function(event,data){ })）就能收到，自己以及自己的子级都不能发送；

$broadcast 广播消息 ，只能被自己或是自己的子级所监听（$on(监听的名字,function(event,data){ })）的到，父级或者更上级不能监听的到

4、service 没有作用域的概念

html

<body ng-controller="myCtrl">
　　<input type="text" ng-model="name" >
　　<div ng-controller="Parent">
　　　　<input type="text" ng-model="name" >
　　　　<div ng-controller="child">
　　　　　　<input type="text" ng-model="name" ng-change="change()">
　　　　</div>
　　　　<div ng-controller="secChild">
　　　　　　<input type="text" ng-model="name">
　　　　</div>
　　</div>
</body>

js

m1.controller("Parent",["$scope","$rootScope",function($scope,$rootScope){
}])
m1.controller("child",["$scope","myData",function($scope,myData){

　　//为什么 $scope.name = myData.name;  不能使上面的联动改变呢

　　//据我所知，我觉得 上面的 $scope.name 是赋值，物理地址也是一样的，就算html中<input>标签都有里面 ng-model="name"，

　  //这样是不会联动的，也就是说多个controller里面的物理地址不一样，

　　//如果是引用myData，$scope.data = myData; html中<input>标签都有里面 ng-model="name"，只是引用其中的数据，其他

　　//包括物理地址都不变，这样就可以联动
　　$scope.data = myData;
}])
m1.controller("secChild",["$scope","myData",function($scope,myData){

　　//为什么 $scope.name = myData.name;  不能使上面的联动改变呢
　　$scope.data = myData;
}])
m1.factory("myData",function(){
　　return{
　　　　name : "123"
　　}
})

总结：service与$emit、$broadcast、$on的区别，service没有作用域的概念；$emit、$broadcast、$on必须要清楚父子级以及作用域的范围。

angular的继承作用域通信的更多相关文章

  1. 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...

  2. 38.angular的scope作用域

    转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...

  3. angular组件间的通信（父子、不同组件的数据、方法的传递和调用）

    angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...

  4. 作用域通信对象：session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后，跳转到另外一个页面显示用户

    作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...

  5. angular 控制器之间的通信

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

  6. ionic准备之angular基础——继承（3）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 后端学 Angular 2 —— 组件间通信

    1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...

  8. javascript构造函数+原形继承+作用域扩充

    目前为止我认为这是最佳的声明对象的模式,将今天学到的东西写下 <script type="text/javascript"> function Constructor( ...

  9. angular.js之作用域scope'@','=','&'

    <!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...

随机推荐

  1. Win10 怎么给php文件设置默认打开应用

    一,首先以管理员身份打开命令提示符 二,assoc .php=phpfile 创建一个文件关联 三,ftype phpfile="E:\Program Files\Sublime Text ...

  2. 剑指offer--47.数据流中的中位数

    时间限制:1秒 空间限制:32768K 热度指数:122511 算法知识视频讲解 题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如 ...

  3. L147 Low Cost Study Has High Impact Results For Premature Babies

    No one knows exactly why some babies are born prematurely(早产), but some of the smallest premature ba ...

  4. New Concept English three（19）

    27w/m 76words Kidnappers are rarely interested in Animals, but they recently took considerable inter ...

  5. 使用 create-react-app 构建 react应用程序

    原文 http://blog.csdn.net/github_squad/article/details/57452333#

  6. SQL Server(MSSQLSERVER)启动失败，提示“请求失败或服务未及时响应

    1.SQL Server(MSSQLSERVER)启动失败,提示“请求失败或服务未及时响应. --------------------------- SQL Server 配置管理器 -------- ...

  7. Redis的集群安装以及rehash重新迁移教程指南

    1. Redis的cluster集群 在官方文档Cluster Spec中,作者详细介绍了Redis集群为什么要设计成现在的样子.最核心的目标有三个: 性能:这是Redis赖以生存的看家本领,增加集群 ...

  8. iOS TUN之避免UDP包ip分片

    iOS的NetworkExtension给应用暴露了一个虚拟网卡TUN设备,可以设置其MTU值.如果上层应用发送的IP包大于这个MTU就会被分片.(详见:http://blog.csdn.net/n5 ...

  9. UDP:rfc768/广播和多播/IGMP

    封装情况:

  10. js实现百度，淘宝搜索功能

        Common.js //封装类名 function byClassName(sClassName){ if(document.getElementsBYClassName){ return d ...