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 相关文章推荐
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
js实现用户注册协议倒计时的方法
Jan 21 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
利用jquery实现瀑布流3种案例
Sep 18 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
JS实现瀑布流效果
Mar 07 Javascript
vue-router 控制路由权限的实现
Sep 24 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中对数据库操作的封装
2006/10/09 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
php生成局部唯一识别码LUID的代码
2012/10/06 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
Javascript继承机制详解
2017/05/30 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
微信小程序云开发实现数据添加、查询和分页
2019/05/17 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
2020/07/31 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python 登录网站详解及实例
2017/04/11 Python
使用python实现tcp自动重连
2017/07/02 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
python线程池threadpool实现篇
2018/04/27 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python zip()函数使用方法解析
2019/10/31 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
介绍一下Python中webbrowser的用法
2013/05/07 面试题
市场部经理岗位职责
2014/04/10 职场文书
优质服务演讲稿
2014/05/14 职场文书
开学典礼策划方案
2014/05/28 职场文书
常务副县长“三严三实”对照检查材料思想汇报
2014/10/05 职场文书
个人买房协议书范本
2014/10/06 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书