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

本文共 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

你可能感兴趣的文章
【阅读笔记】Prostate Cancer Diagnosis using Deep Learning with 3D Multiparametric MRI
查看>>
解读《德勤2017年全球CIO报告》:顶级CIO的炼成之道
查看>>
A Tour of Go Nil slices
查看>>
第29条:理解引用计数
查看>>
boost asio中io_service类的几种使用
查看>>
[Java]HashMap的两种排序方式
查看>>
slice、splice、concat操作后数组的变化
查看>>
DEDE栏目内容调用
查看>>
icheck.js的一个简单demo
查看>>
mysql语句记录
查看>>
消息中间件rabbitmq(3)
查看>>
CSS :hover伪类选择定义和用法
查看>>
php文件删除unlink()详解
查看>>
(Access denied for user 'root'@'localhost' (using password: NO))
查看>>
设计模式
查看>>
Qt入门之基础篇 ( 二 ) :Qt项目建立、编译、运行和发布过程解析
查看>>
Linux系统中安装软件的几种方式
查看>>
LeetCode-Guess Number Higher or Lower
查看>>
scala:可变长参数和:_*符号
查看>>
洛谷P2568 GCD(莫比乌斯反演)
查看>>