博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
angularJS实现不同视图同步刷新
阅读量:6296 次
发布时间:2019-06-22

本文共 1004 字,大约阅读时间需要 3 分钟。

前言

  作为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方法刷新视图

 

转载于:https://www.cnblogs.com/zhangjunfeng/p/6616599.html

你可能感兴趣的文章
Unbuntu安装遭遇 vmware上的Easy install模式
查看>>
几个常用的ASP木马
查看>>
python分析postfix邮件日志的状态
查看>>
Mysql-5.6.x多实例配置
查看>>
psutil
查看>>
在git@osc上托管自己的代码
查看>>
JAVA应用小程序(Applet)
查看>>
Mac OS终端提示符前缀”bogon”
查看>>
Learning ImageMagick 4: 批处理
查看>>
Python 条件判断
查看>>
中国大陆开源镜像站汇总
查看>>
Different Layouts for Different Widths
查看>>
关于cisco与中兴三层设备ospf互连
查看>>
vs2015_ef 连接mysql
查看>>
HTML5 手写板签名
查看>>
STL容器类
查看>>
RPA学习-关于读 csv 文件报错问题
查看>>
mac composer 使用
查看>>
PDF怎么测量尺寸
查看>>
改造Dubbo,使其可以对接口方法进行注解配置
查看>>