angularJS实现不同视图同步刷新详解


Posted in Javascript onOctober 09, 2018

前言

作为angularJS框架MVC中M和V的桥梁,controller在整个angularJS的web应用中有着举足轻重的作用。

通常我们可以使用单例service的方式在不同的controller里面共享数据。比如在controller1中通过点击事件修改了service里面的值,controller2中再通过点击事件去获取service中被修改的值,即实现了一个值的传递。但是,如果在controller2中没有设置点击事件,如何实现当controller1中修改了值后,controller2自动去获取新值呢?

比如有这么一个场景,你有一个服务,服务中存储着你需要的数据。你有一个列表视图A,以及一个数据显示视图B,通过两个控制器Actl以及Bctl去分别控制这两个视图,并且Actl和Bctl有一个共同的父ctl。当你点击列表视图A中的不同列表项,数据显示视图B会同步的根据你选择的不同列表项去服务中获取相应的数据并将其显示在自己的视图界面上。

 通过$on,$broadcast,$emit方法实现不同视图界面同步刷新

angularJS提供了一整套的事件传播方法,用来在不同的控制器中传递事件以及数据。

$on用于在作用域中监控从子级或父级作用域中传播的事件以及相应的数据。

格式如下:$on(event,data);

$broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。

格式如下:$broadcast(eventName,args);

$emit的作用是将事件从子级作用域传播至父级作用域,包括自己,直至根作用域。

格式如下:$emit(eventName,args);

通过上面三个方法即能实现我们场景的需求。

方法如下:

1.在列表视图A中,使用譬如$emit('fresh',data)的形式发射一个事件,data可以是你选择的这个列表项的编号等

2.在父ctl上通过$on监听该事件,获取列表视图A传递上来的data,然后通过$broadcast向下广播事件

3.在数据显示视图B中,监听父ctl广播的事件类型,在回调函数里面使用得到的data值去service中获取相应的数据,然后使用$apply方法刷新视图。

以上这篇angularJS实现不同视图同步刷新详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Js基础学习资料
Nov 23 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
基于jQuery制作小图标上下滑动特效
Jan 18 Javascript
深入理解JavaScript中的for循环
Feb 07 Javascript
vue.js 获取select中的value实例
Mar 01 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
详解如何在微信小程序中愉快地使用sass
Jul 30 Javascript
Vue实现验证码功能
Dec 03 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 #Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 #Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 #Javascript
angular4强制刷新视图的方法
Oct 09 #Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 #Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 #Javascript
vue router 源码概览案例分析
Oct 09 #Javascript
You might like
学习php设计模式 php实现适配器模式
2015/12/07 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
JQuery实现的按钮倒计时效果
2015/12/23 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
AngularJs中$cookies简单用法分析
2019/05/30 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
python一键去抖音视频水印工具
2018/09/14 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
可靠的数据流传输TCP
2016/03/15 面试题
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
经典公益广告词
2014/03/13 职场文书
12岁生日演讲稿
2014/05/14 职场文书
小学综合实践活动总结
2014/07/07 职场文书
学校政风行风自查自纠报告
2014/10/21 职场文书
置业顾问岗位职责
2015/02/09 职场文书
银行求职自荐信范文
2015/03/04 职场文书
门店店长岗位职责
2015/04/14 职场文书
2015年乡镇组织委员工作总结
2015/10/23 职场文书
2019银行竞聘书
2019/06/21 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
Python简易开发之制作计算器
2022/04/28 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js