angular的继承作用域通信
本人学了一段时间的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的继承作用域通信的更多相关文章
- 跟我学AngularJs:Controller数据共享、继承、通信使用具体解释
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 摘要:本文主讲了AngularJs中的Controller中数据共享.继承.通信的具体使用 本 ...
- 38.angular的scope作用域
转自:https://www.cnblogs.com/best/tag/Angular/ 1. Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. S ...
- angular组件间的通信（父子、不同组件的数据、方法的传递和调用）
angular组件间的通信(父子.不同组件的数据.方法的传递和调用) 一.不同组件的传值(使用服务解决) 1.创建服务组件 不同组件相互传递,使用服务组件,比较方便,简单,容易.先将公共组件写在服务的 ...
- 作用域通信对象：session用户在登录时通过`void setAttribute(String name,Object value)`方法设置用户名和密码。点击登录按钮后，跳转到另外一个页面显示用户
作用域通信对象:session session对象基于会话,不同用户拥有不同的会话.同一个用户共享session对象的所有属性.作用域开始客户连接到应用程序的某个页面,结束与服务器断开连接.sessi ...
- angular 控制器之间的通信
1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...
- ionic准备之angular基础——继承（3）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 后端学 Angular 2 —— 组件间通信
1. 父组件向子组件传递信息 使用@Input 子组件的属性用 @Input 进行修饰,在父组件的模板中绑定变量 例子: import { Component, OnInit, Input } fro ...
- javascript构造函数+原形继承+作用域扩充
目前为止我认为这是最佳的声明对象的模式,将今天学到的东西写下 <script type="text/javascript"> function Constructor( ...
- angular.js之作用域scope'@','=','&'
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...
随机推荐
- TI IPNC Web网页之网页修改教程
web网页程序修改 打开gStudio之后,点击菜单栏中Help->Contents.先把这个诡异的编程语言看一遍吧.这里搬一些东西出来. GoDB简介 从第一副图片中,我们可以看出,从源文件到 ...
- Draggable拖动
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 EasyUI中Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件. 1.加载方式 / ...
- [转载]latex插入两栏的图形或表格
转载自:http://blog.csdn.net/huilingwu/article/details/51649250 latex进行两栏排版时,有时会遇到一些宽度较大的图形或表格,没办法挤在一栏中, ...
- iOS实现程序长时间未操作退出
大部分银行客户端都有这样的需求,在用户一定时间内未操作,即认定为token失效,但未操作是任何判定的呢?我的想法是用户未进行任何touch时间,原理就是监听runloop事件.我们需要进行的操作是创建 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- 安装visio 2010：您的计算机上的Office 2003安装已损坏，安装程序无法继续。请删除或修复office 2003产品并重新运行安装程序
您的计算机上的Office 2003安装已损坏,安装程序无法继续.请删除或修复office 2003产品并重新运行安装程序 最近打算安装visio 2010时出现 以下错误: “您的计算机上的Of ...
- boost库之udp广播实例
//UdpLinkServer.h //udp服务 #pragma once #include <boost/asio/ip/tcp.hpp> #include <boost/asi ...
- Bandit:一种简单而强大的在线学习算法
假设我有5枚硬币,都是正反面不均匀的.我们玩一个游戏,每次你可以选择其中一枚硬币掷出,如果掷出正面,你将得到一百块奖励.掷硬币的次数有限(比如10000次),显然,如果要拿到最多的利益,你要做的就是尽 ...
- Android MVC,MVP,MVVM模式入门——重构登陆注册功能
一 MVC模式: M:model,业务逻辑 V:view,对应布局文件 C:Controllor,对应Activity 项目框架: 代码部分: layout文件(适用于MVC和MVP两个Demo): ...
- SQL批量插入出现 类型转换错误
1.原因:在使用SqlBulkCopy批量操作时,Map映射会出现表结点对应错误 2.解决方案:自己先建立字段映射 using (SqlConnection con = new SqlConnecti ...