本人学了一段时间的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. 【前端工具】 在 Windows 下安装 GruntJS——教程（译）

    在你安装 Grunt.js 之前你需要先安装 Node.js.对于本教程而言,我已经安装好了 node.js v0.10.0. 我将要安装 Grunt.js v0.4.1.警告:如果你已经安装了 Gr ...

  2. Mysql数据库的增删改查

    在运行程序之前需要在mysql数据库中创建test数据库,如下图所示: 下面是具体是实现程序: package News; import java.sql.Connection; import jav ...

  3. 一个功能丰富的 jQuery 树形插件 z-tree

    链接 如果你的树 很复杂, 需要拖拽功能, 还可以考虑用这个 另外还有一个目前在用 Dynatree 如果一般的树, 还是自己写一个, 也很轻松,    如果有一两个复杂的点, 可以参考ZTree

  4. Scrapy爬虫库使用初体验

    安装pip install Scrapy 中间可能会遇到的问题: 超时,网络问题需要多次尝试 缺少vc++库,官网可以下载 win32api缺失,https://sourceforge.net/pro ...

  5. Could not load the "light_rain.png" image referenced from a nib in the bundle with identifier

    导入图片文件夹的时候勾选create groups

  6. Git学习的网址

    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 https://github.co ...

  7. js里获取html真实舞台宽高

    var winSize = {width:document.documentElement.clientWidth,height:document.documentElement.clientHeig ...

  8. mac下安装伪分布hadoop2.6.0和hbase1.0.1.1

    1.安装JDK,我安装的是java1.7 2.创建管理员账户 3.安装ssh服务(如果已有跳过此步) 4.ssh无密码验证登陆 以上过程略,可参考ubuntu下安装hadoop一文. 5.下载并解压h ...

  9. selenium-java,定位并操作frame和iframe内的元素

    因为frame和iframe的原因,在frame里的元素不能直接定位需要切到相应的frame才可以对元素进行操作,下面是涉及的方法 webDriver.switchTo().defaultConten ...

  10. Jmeter-BeanShell Sampler调用java代码

    1.添加BeanShell Sampler 2.编写BeanShell Sampler代码 3.引用参数 ${id}