angularjs通信以及postmessage与iframe通信
2024-05-19 21:40:48
这篇文章是用markdown工具写的，有需要的可以使用vscode打开
# angularjs 控制器、组件之间的通信
## 一、基于事件的方式
此方式下，主要通过 angularjs 内置指令`$on`，`$emit`，`$broadcast`来实现
- $on：表示事件监听
- $emit：表示向父级以上的作用域触发事件
- $broadcast：表示向子级以下的作用域广播事件
### 1. 向下广播事件
```js
//父控制器
function father($scope) {
$scope.toChildren = function() {
$scope.$broadcast('toChildren', 'father to children');
}
}
//子控制器
function children($scope) {
$scope.$on('toChildren', function(e, data) {
console.log('父传过来的值', data);
});
}
```
### 2. 向上传播事件
```javascript
//子控制器
function children($scope) {
$scope.$emit('toFather', 'children to father');
}
//父控制器
function father($scope) {
$scope.$on('toFather', function(e, data) {
console.log('子传过来的值', data);
});
}
```
### 3. 同级作用域之间传播
一个子控制中向父作用域触发一个事件，然后在父作用域中监听事件，再广播给另一子作用域，这样通过事件携带参数，实现了数据经过父作用域，在同级作用域之间传播。
**注意：** 通过父元素作为中介进行传递，同级元素用的事件名不能一样，否则会进入死循环。
```js
//子控制器1
function children1($scope) {
$scope.toChildren2 = function() {
$scope.$emit('toChildren2', 'children1 to children2');
}
}
//父控制器
function father($scope) {
$scope.$on('toChildren2', function(e, data) {
$scope.$broadcast('toChildren', data);
});
}
//子控制器2
function children2($scope) {
$scope.$on('toChildren', function(e, data) {
console.log('children1传过来的值', data);
});
}
```
## 二、angularjs服务的方式
在 angularjs 中服务是一个单例，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有的控制器中共享
```js
var app = angular.module('myApp', []);
//服务
app.factory('instance', function(){
return {};
});
//控制器1
app.controller('MainCtrl', function($scope, instance) {
$scope.change = function() {
instance.name = $scope.test;
};
});
//控制器2
app.controller('sideCtrl', function($scope, instance) {
$scope.add = function() {
$scope.name = instance.name;
};
});
```
## 三、component中的bindings对象
官方并不推荐我们使用 "=" 进行数据绑定， 因为 "=" 是一种双向的数据绑定，这就意味着我们在 component 中去修改数据的时候，在它的父组件中的值也会被修改。
```js
bindings: {
hero: '<', //'<'单向数据绑定,'='双向数据绑定
comment: '@', //'@'字符串绑定，特别是在绑定的值不会更改的时候
onClick: '&' //函数，绑定的函数将作为component事件的回调函数
}
```
### 1. component与父组件数据之间的绑定
父组件
```html
<body ng-controller="MainCtrl as ctrl">
<h3>hero</h3>
<br>
<hero-detail hero='ctrl.hero'></hero-detail>
</body>
```
```js
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.hero = {
name:'Sunday'
}
});
```
子组件
```HTML
<h1>HeroName: {{$ctrl.hero.name}}</h1>
```
```javascript
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'',
controller:HeroDetailController,
bindings:{
hero:'<'
}
});
```
### 2. component与父组件方法之间的绑定
父组件
```html
<body ng-controller="MainCtrl as ctrl">
<hero-detail on-log="ctrl.log(text)"></hero-detail>
</body>
```
```js
angular.module('ComponentTestApp',[])
.controller('MainCtrl',function(){
this.log = function(text){
console.log("输出的内容为： " + text);
}
});
```
子组件
```html
<input type="text" placeholder="被输出的内容" ng-model="text">
<br>
<button ng-click="onLog()">outputLog</button>
```
```js
function HeroDetailController($scope){
$scope.text = '';
var ctrl = this;
$scope.onLog = function(){
ctrl.onLog({text: $scope.text});
}
}
angular.module('ComponentTestApp')
.component('heroDetail',{
templateUrl:'',
controller:HeroDetailController,
bindings:{
onLog:'&'
}
});
```
**注意：** 在代码中我们通过 "&" 符号去绑定了一个方法 `onLog()`，该方法接收一个 `text` 参数，在参数进行传递的时候，是以 json 的形式进行传递的，这样我们在点击 `outputLog` 按钮的时候，就会输出我们在 `input` 中输入的内容。
# postMessage、iframe通信
## iframe通信
通常我们使用iframe直接在页面嵌套iframe标签指定的src就可以了
```html
<iframe name="myiframe" id="myiframe" src="external_file.html" frameborder="0" width="200" height="200" scrolling="no">
```
- name：规定 `iframe` 的名称。
- width：规定 `iframe` 的宽度。
- height：规定 `iframe` 的高度。
- src：规定在 `iframe` 中显示的文档的URL。
- frameborder：规定是否显示 `iframe` 周围的边框。 (0 为无边框，1 位有边框)。
- align：规定如何根据周围的元素来对齐 `iframe`。 (left，right，top，middle，bottom)。
- scrolling：规定是否在 `iframe` 中显示滚动条。 (yes，no，auto)
通常我们需要从URL获取相关字段，可以通过下面方法，然后做相关业务处理
```js
$scope.urlData = $location.search();
```
## postMessage通信
### 1. 父页面发送数据给子页面
```js
//获取iframe元素
iFrame = document.getElementById('myiframe')
//iframe加载完毕后再发送消息，否则子页面接收不到message
iFrame.onload = function(){
//iframe加载完立即发送一条消息
iFrame.contentWindow.postMessage('MessageFromIndex1','*');
}
```
```js
//回调函数
function receiveMessage ( event ) {
console.log( 'receiveMessage', event )
}
//监听message事件
window.addEventListener("message", receiveMessage, false);
```
- postMessage是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用postMessage方法，相当于给子页面发送了一条消息
- postMessage方法第一个参数是要发送的数据，可以是任何原始类型的数据。
- postMessage方法第二个参数可以设置要发送到哪个url，如果当前子页面的url和设置的不一致，则会发送失败，我们设置为*，代表所有url都允许发送。
### 2. 子页面发送数据给父页面
```js
//给父页面发送消息，data为对象
window.parent.postMessage( {msg: 'MessageFromIframePage'}, '*');
```
```js
//回调函数
function receiveMessageFromIframePage (event) {
console.log('receiveMessageFromIframePage', event)
}
//监听message事件
window.addEventListener("message", receiveMessageFromIframePage, false);
```
转载于:https://www.cnblogs.com/wzq201607/p/angularjs_communication.html
angularjs通信以及postmessage与iframe通信相关推荐
- 服务端转发html页面,html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式 使用postMessag ...
- 浅谈postMessage跨域通信与localStorage实现跨域共享
我们可能有需要在多个域名之间共用同一个localStorage的需要 一.我们先测试不同域名之间的通信 1.有 child.html 如下,代码中 window.parent.postMessage( ...
- html5跨域通信之postMessage
html5跨域通信之postMessage的用法 不同域名下的文档因为安全问题,不允许相互之间文档的访问,但是有的时候却不得不需要这样的操作.因此我们一般可以采用 window.name,hash,或 ...
- 子组件调用父组件方法_vue父子组件通信以及非父子组件通信的方法
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系,父子关系.兄弟关系和隔代关系,简化点可以分为父子关系和 ...
- 【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 通信场景 | Channel 通信机制 | Channel 支持的通信数据类型 | Channel 类型 )
文章目录 一.Flutter 和 Native 应用之间的通信场景 二.Flutter 和 Native 的 Channel 通信机制 三.Channel 通信机制支持的数据类型 四.Channel ...
- stm32串口通信（初学者对于串口通信的理解）
stm32串口通信(初学者对于串口通信的理解) 标签: stm32串口通信单片机 2015-01-24 10:12 987人阅读 评论(0) 收藏 举报 分类: stm32 版权声明:本文为博主原创 ...
- 如何理解“不要通过共享内存来通信，而应该通过通信来共享内存”？
不要通过共享内存来通信,而应该通过通信来共享内存 这是一句风靡golang社区的经典语,对于刚接触并发编程的人,该如何理解这句话? 如何理解"不要通过共享内存来通信,而应该通过通信来共享内存 ...
- 基于Matlab的模拟通信实验平台设计,【通信原理仿真实验】通信原理虚拟实验仿真平台的设计和实现_玛雅作文网...
作文「通信原理虚拟实验仿真平台的设计和实现」共有 4564 个字,其中有 2704 个汉字,1316 个英文,162 个数字,382 个标点符号.作者佚名,请您欣赏.玛雅作文网荟萃众多优秀学生作文,如 ...
- Socket的通信是基于连接的通信，通信结束时，Socket将不再有用，关闭时为了节约宝贵的系统资源
Socket的通信是基于连接的通信,通信结束时,Socket将不再有用,关闭时为了节约宝贵的系统资源. package p1;import java.io.DataInputStream; impor ...
- 变电站通信网络与系统-特定通信服务映射(SCSM)
第一节:对制造报文规约(Manufacturing Message Specification) (MMS)的映射 1 范围 2 引用标准 3 定义 4 缩写 5 映射的一般性问题 6 服务一致性 ...
最新文章
- Javascript+xmlhttp调用Webservice
- 机器学习重新构想计算的构建块
- 号外：Mapinfo被Pitney Bowes公司收购
- Linux 操作系统原理 — loop 伪设备
- 谷歌AMP和百度MIP，你选哪个？
- Py之featuretools：featuretools库的简介、安装、使用方法之详细攻略
- iScroll 5 API 中文版
- 大数据专家手把手教你打造实时数据湖
- lcc-win32使用指南
- LeetCode 225. Implement Stack using Queues
- 生成名片二维码 python
- 小米8护眼模式无效_雷军没有交代的小米9的N个细节，这篇文章全告诉你了
- react启动命令_十分钟搭建React开发环境
- ubuntu mysql 操作_Ubuntu系统下MySQL数据库基本操作
- nginx: [warn] conflicting server name localhost on 0.0.0.0:80, ignored
- 210920-车站问题
- javascript 按下回车键触发input表单的切换（enter键代替tab键功能）
- R,L,C,t物理量之间的量纲关系
- 10000字拆解：五个美妆新品牌私域背后的数据和逻辑
- 计算机图形学（第2版 于万波 于硕 编著）第45页的Bresenham算法有错误