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

以上这篇angularJS实现不同视图同步刷新详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于AngularJS中ng-repeat不更新视图的解决方法

    最近写AngularJS项目中,遇到一个问题,先对数组进行赋值,ng--repeat正常工作,然后对数组进行修改,ng-repeat似乎没有工作,视图没有更新. 原因是ng-repeat会已默认值排序,由于我的数组中的元素有重复,所以ng-repeat没有对重复的元素进行刷新,只要对ng-repeat指定track by就可以了 <tr ng-repeat="selectedCriterias in selectedCriteriasArray track by $index"&

  • angular4强制刷新视图的方法

    使用angular的过程中有时会出现数据已经更新了,但是对于的视图没有更新,针对这一情况,可以是用angular提供的方法强制更新视图. 这里使用NGZone来更新视图 import {NgZone} from '@angular/core'; constructor(private zone: NgZone) { this.zone.run(() => { // 要更新视图的代码 }) } 以上这篇angular4强制刷新视图的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大

  • AngularJS 视图详解及示例代码

    AngularJS 视图详解及示例代码

    AngularJS支持通过在单个页面上的多个视图的单页应用.要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务. ng-view ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置. 使用 定义一个div与ng-view在主模块中. <div ng-app="mainApp"> ... <div ng-view><

  • 对angular 实时更新模板视图的方法$apply详解

    有的时候在回调里面写了更新scope的里面的内容,视图上面竟然没有同时更新,这就用到了$apply Scope的特性 接下来,看看Scope有哪些特性呢? Scope提供$watch方法监视Model的变化. Scope提供$apply方法传播Model的变化. Scope可以继承,用来隔离不同的application components和属性访问权限. Scope为Expressions的计算提供上下文. 最简单的使用方法,就是在需要传递变化的地方写上以下代码 $scope.$apply()

  • angularJS实现不同视图同步刷新详解

    前言 作为angularJS框架MVC中M和V的桥梁,controller在整个angularJS的web应用中有着举足轻重的作用. 通常我们可以使用单例service的方式在不同的controller里面共享数据.比如在controller1中通过点击事件修改了service里面的值,controller2中再通过点击事件去获取service中被修改的值,即实现了一个值的传递.但是,如果在controller2中没有设置点击事件,如何实现当controller1中修改了值后,controlle

  • AngularJs表单验证实例详解

    AngularJs表单验证实例详解

    常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

  • AngularJS的$location使用方法详解

    AngularJS的$location使用方法详解 一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ //设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置<base href="&

  • Angularjs中数据绑定的实例详解

    Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head

  • AngularJS的Filter的示例详解

    AngularJS的Filter的示例详解

    贴上几个有关Filter使用的几个示例. 1. 首先创建一个表格 <body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> <br><br

  • AngularJS constant和value区别详解

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.constant(name,value)可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分中.其中,name为注册的常量的名字,value为注册的常量的值或对象. 举例: (1)value为值时: angular.module('myApp') .constant('apiKey','12

  • angularjs中的$eval方法详解

    在controller中定义了一个变量 $scope.a_1 = "abc"; 想在view里面动态输出,因为这个数字是动态的,这么输出肯定是不行的{{'a_' + '1'}},因为输出来的是a_1这个字符串,而不是a_1这个变量的值 想输出a_1这个变量的值,可以使用$eval方法:{{$eval('a_' + '1')}} $eval是作为scope的方法来使用的,在controller中使用的话,是这么使用:$scope.$eval() 以上这篇angularjs中的$eval方

  • 浅谈AngularJs指令之scope属性详解

    AngularJS使用directive()方法类定义一个指令: .directive("name",function(){ return{ }; }) 上面是定义一个指令的主体框架,该方法接受两个参数: 1.第一个参数:name表示定义的指令的名称(angularjs会用这个name注册这个指令) 2.第二个参数:函数,该番薯必须返回一个对象或者一个函数,但通常我们会返回一个对象.return后接的就是返回的对象. 在返回的对象中有一个scope属性,这个属性用来修饰指令的作用域.

  • AngularJS封装$http.post()实例详解

      AngularJS封装$http.post()实例详解 用了不是很长的时间跟了一个移动APP项目,用的是ionic + AngularJS + cordova框架,其间遇到过挺多问题,其中一个就是对Ajax的封装问题. 其实针对封装问题一直以来就没停止过谈论,不同的项目也有不同的需求,举个典型的例子,我在做这个项目的时候因为一开始没有考虑封装问题所以被批评了,而我的一个朋友却因为封装了受到了批评--很尴尬不是么. 那么对于是否要封装这个问题,究竟该怎么界定?其实这不是一个很复杂的问题,归根到

  • MySQL中数据视图操作详解

    目录 1.视图概述 1.1创建视图 1.2视图的查询 2.操作视图 2.1通过视图操作数据 2.2修改视图定义 2.3删除视图 1.视图概述 视图是从一个或多个表(或视图)导出的表.视图与表(有时为与视图区别,也称表为基本表)不同,视图是一个虚表,即视图所对应的数据不进行实际存储,数据库中只存储视图的定义,对视图的数据进行操作时,系统根据视图的定义去操作与视图相关联的基本表. 视图一经定义,就可以像表一样被查询.修改.删除和更新.使用视图有下列优点: 1.为用户集中数据,简化用户的数据查询和处理

随机推荐