angularJS实现不同视图同步刷新

前言

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

时间: 2024-07-30 13:46:17

angularJS实现不同视图同步刷新的相关文章

angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法呢?

angularjs如何在视图渲染结束之后,或者render之后执行指令中的link方法 关键字: $timeout app.directive("myDirective",function($timeout){ return{ restrict:"A", link:function(scope,element,attrs,accordionController){ $timeout(function(){ element.click(function(){ aler

AngularJS笔记---路由视图

最近有同事提到过关于ng-view的使用, 其实自己也不懂了,由于最近一直在做AngularJs的Rearch,所以就看了一些关于ng-view的国外博客. 做过ASP.NET MVC4的都知道, 我们会有一个对应的controller和views,还有一个routerconfig. 其实在AngularJS也有类似的东西.下面我会按照Asp.net的MVC框架搭建一个AngularJs的小Demo出来. 一.创建文件目录: A. Controller文件夹放ng-controller的代码 B

AngularJs多重视图和路由的使用

使用AngularJs来做多重视图和路由是在方便不过了,在开发过程中,都有许多的页面,而这些页面都有相同的部分,比如页面的头部和尾部通常都是一样的,变化的都是主体部分,还有就是一些后端管理的一些项目,通常不变的都是头部,尾部和菜单部分,变化的都是右边的内容部分,使用AngularJs的多重视图和路由就可以很方便的实现这样的效果.在实现之前需要准备两个文件,一个是angular的主JS文件,另一个是angular的路由JS文件,如下: <script src="js/angular.min.

AngularJS移动开发中的坑汇总

使用AngualrJs开发移动App已经快半年了,逐渐积累了很多AngularJS的问题,特别是对于用惯了Jquery的开发者,转到AngularJS还是需要克服很多问题的.不像Jquery那样侧重DOM操作,AngularJS是以视图模型和双向绑定为核心的. 下面的内容假设你已经了解前端 MVC 概念,并对 AngularJS 有了一定经验,初学者读起来可能比较艰深晦涩.本文的总结会涉及部分在移动设备上特有的问题. DOM操作的问题 避免使用 jQuery 来操作 DOM,包括增加元素节点,移

对比jQuery和AngularJS的不同思维模式

jQuery是dom驱动,AngularJS是数据驱动,这里有一篇文章阐述的非常好,建议看看 本文来自StackOverFlow上How do I “think in AngularJS” if I have a jQuery background?一题中得票最高的回答.该回答得票超过3000次,回答者Josh David Miller是活跃于开源社区的开发者,也是Emergenesis公司的联合创始人.该答案最初由数云架构师韩铮翻译并发布在自己的博客上,在征得Josh同意后由韩铮本人推荐给 I

AngularJs 入门系列-1 使用 AngularJs 搭建页面基本框架

每当看到前端程序员在脚本.样式.表单处理逻辑中苦苦挣扎的时候,我就在想,为什么不用Angular Js 呢? Angular Js 支持页面前端的 MVC 模式开发,在 Angular JS 的支持下,我们可以将页面前端处理的数据与页面展示进行分离,实现优雅的代码结构. 首先,我们需要到 AngularJs 的官网下载这个脚本库. 地址:https://angularjs.org/ 不过,这个网站经常被封,你也可以直接在这里下载: http://files.cnblogs.com/haogj/A

[转]如果我有jQuery背景,我应该如何切换到AngularJS的思维模式?

导言 stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式? 有一个回复非常经典,获得了两千多票. 为了让国内开发者也能领略到其中的核心思想,现把这个问题和答案翻译出来供大家参考. Question 假设我已经熟悉了如何使用jQuery来开发客户端应用,我现在打算使用AngularJS.请描述一下有那些思维模式方面的东西需要转变吗?下面是举出一些具体的问题,用来帮助你回答我的这个问题: 我应该以何种不同的方式来架构和设计客户端w

Angularjs中使用ui-route如何异步加载组件?

ui-route相比于angularjs的原生视图路由更好地支持了路由嵌套,状态转移等等.随着视图不断增加,打包的js体积也会越来越大,比如我在应用里面用到了 wangeditor里面单独依赖的jquery就300多k.异步加载各个组件就很有必要.在这里我就以ui-route为框架来进行异步加载说明,希望对大家学习angularjs有所帮助. 首先看一下路由加载文件 angular.module('webtrn-sns').config(['$stateProvider', function (

对比jQuery和AngularJS的不同思维模

Question 假设我已经熟悉了如何使用jQuery来开发客户端应用,我现在打算使用AngularJS.请描述一下有那些思维模式方面的东西需要转变吗?下面是举出一些具体的问题,用来帮助你回答我的这个问题: 我应该以何种不同的方式来架构和设计客户端web应用?最大的不同点是什么? 我应该停止使用哪些东西:又应该开始使用哪些东西来替代? 服务端有没有什么需要考虑或者说需要约束的地方? 1.不要预先设计页面,然后再用DOM操作去修改它 在jQuery里面,你会先设计好一个页面,然后再让它变成动态的.