zoukankan      html  css  js  c++  java
  • 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方法刷新视图

  • 相关阅读:
    询问给定图中树的棵数
    题目1365:贝多芬第九交响曲
    题目1463:招聘会
    九度 题目1395:爱钱的胡老板
    HDU 4666 Hyperspace && POJ 2926 Requirements
    九度 题目1493:公约数
    九度 题目1523:从上往下打印二叉树 题目1521:二叉树的镜像
    iOS CoreBluetooth 教程 蓝牙
    点击推送,跳转到查看推送消息的页面
    学习ios蓝牙技术,仿写lightblue
  • 原文地址:https://www.cnblogs.com/zhangjunfeng/p/6616599.html
Copyright © 2011-2022 走看看