让AngularJS的controllers之间共享数据
如何让controller之间共享数据呢?大致是让不同controller中的变量指向同一个实例。
通过service创建一个存放共享数据的对象。
.service("greeting", function Greeting(){
var greeting = this; greeting.message = "default";
})
让不同的controller中的变量指向Greeting这个实例。
.controller('FirstCtrl', function FirstCtrl(greeting){
var first = this;
first.greeting = greeting;
})
.controller('SecondCtrl', function SecondCtrl(greeting){
var second = this;
second.greeting = greeting;
})
以上,FirstCtrl和SecondCtrl中的greeting变量都指向Greeting这个实例。这样FirstCtrl和SecondCtrl共享同一个Greeting实例。
具体实现,先看文件结构:
templates/
.....first.html
.....second.html
app.js
index.html
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
<style>
body{
padding:20px;
}
</style>
</head>
<body> <div class="container">
<ui-view></ui-view>
</div> <script src="../../node_modules/angular/angular.min.js"></script>
<script src="../../node_modules/angular-ui-router/build/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</body>
</html>
以上,ui-view是用来呈现不同的视图。
app.js
angular.module('app',['ui.router'])
.config(function config($stateProvider){
$stateProvider.state('index',{
url:"",
controller: "FirstCtrl",
controllerAs: "first",
templateUrl:"templates/first.html"
}); $stateProvider.state('second',{
url:"/second",
controller:"SecondCtrl as second",
templateUrl: "templates/second.html"
});
})
.service("greeting", function Greeting(){
var greeting = this; greeting.message = "default";
})
.controller('FirstCtrl', function FirstCtrl(greeting){
var first = this;
first.greeting = greeting;
})
.controller('SecondCtrl', function SecondCtrl(greeting){
var second = this;
second.greeting = greeting;
})
以上,在angular-ui-router.min.js中封装了ui.router这个module,需要依赖它。
first.html
<input type="text" ng-model="first.greeting.message"/> <div ng-class="first.greeting.message">
{{first.greeting.message}} {{'world'}}
</div> <div ui-sref="second">Go to second</div>
以上,文本框通过ng-model和first.greeting.message进行了双向绑定,即同Greeting这个实例的message进行了双向绑定。
second.html
<h1>{{second.greeting.message}}</h1>
当更改first.html中文本框的值,这里的值也会相应变化。
让AngularJS的controllers之间共享数据的更多相关文章
- 学习笔记4_ServletContext(重要整个Web应用的动态资源之间共享数据)
ServletContext(重要) 一个项目只有一个ServletContext对象! 我们可以在N多个Servlet中来获取这个唯一的对象,使用它可以给多个Servlet传递数据! 与天地同寿!! ...
- Android应用程序组件Content Provider在应用程序之间共享数据的原理分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6967204 在Android系统中,不同的应用 ...
- VC++共享数据段实现进程之间共享数据
当我写了一个程序,我希望当这个程序同时运行两遍的时候,两个进程之间能共享一些全局变量,怎么办呢?很简单,使用VC\VC++的共享数据段.; #pragma data_seg()//恢复到正常段继续编程 ...
- 多线程(四) 实现线程范围内模块之间共享数据及线程间数据独立(Map集合)
多个线程访问共享对象和数据的方式 1.如果每个线程执行的代码相同,可以使用同一个Runnable对象,这个Runnable对象中有那个共享数据,例如,买票系统就可以这么做. 2.如果每个线程执行的代码 ...
- 多线程(三) 实现线程范围内模块之间共享数据及线程间数据独立(ThreadLocal)
ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.JDK 1.2的版本中就提供java.lang.ThreadLocal,使用这个工具类可以很简洁地编写出优美的多线程程序,Threa ...
- Python 进程之间共享数据
最近遇到多进程共享数据的问题,到网上查了有几篇博客写的蛮好的,记录下来方便以后查看. 一.Python multiprocessing 跨进程对象共享 在mp库当中,跨进程对象共享有三种方式,第一种 ...
- Python 进程之间共享数据(全局变量)
进程之间共享数据(数值型): import multiprocessing def func(num): num.value=10.78 #子进程改变数值的值,主进程跟着改变 if __name__= ...
- 面试之路(13)-android apk之间共享数据的方式以及shareUserId详解
1.通过content Provider/sharedPreferrence 2.通过shareUserId 我们详细介绍一下shareUserId: Android App Sandbox(andr ...
- WCF各个Service之间共享数据
为了实现cache存储验证用户身份信息,减少通过数据库验证的次数,需要在wcf各个服务之间建立共享数据区. namespace WcfService1 { public static clas ...
随机推荐
- http和socket之长连接和短连接区别【转】
转自:https://blog.csdn.net/mengyafei43/article/details/25195445 TCP/IP TCP/IP是个协议组,可分为三个层次:网络层.传输层和应用层 ...
- ioctl函数详细说明(网络)
ioctl 函数 本函数影响由fd 参数引用的一个打开的文件. #include<unistd.h> int ioctl( int fd, int request, .../* void ...
- 公共语言运行库(CLR)开发系列课程(1):Pinvoke 简介 学习笔记
前言 让拖管代码对象和非托管对象协同工作的过程称为互用性(Interoperability),通常简称为 Interop. P/Invoke在托管代码与非托管代码交互式时产生一个事务(Transiti ...
- 解决getJSON跨域登录Session丢失的问题
最近在做项目中发现,我用下面的代码异步请求到login.ashx: var memberUrl = rooturl + 'member.ashx?r=' + Math.random() + '& ...
- linux终端自定义设置
2014年1月4日 19:21:16 1. ls命令显示文件列表时不再花花绿绿 vi ~/.bashrc alias ls='ls -a --color=never' alias ll='ls -lh ...
- Ubuntu+Nginx+uWSGI+Flask应用
Ubuntu 18.04,Nginx 1.14.0,uWSGI 2.0.17.1,Flask 1.0.2,Python 3.6.5, 多日未更新博客,就是在忙着把自己的Flask应用在Ubuntu上运 ...
- 【论文阅读】MEAL: Multi-Model Ensemble via Adversarial Learning
转载请注明出处:https://www.cnblogs.com/White-xzx/ 原文地址:https://arxiv.org/abs/1812.02425 Github: https://git ...
- Windows 10安装pip方法
pip是一款非常方便的python包管理工具,本文主要介绍在windows 10下安装pip方法. 1. 下载pip 地址:https://pypi.python.org/pypi/pip#downl ...
- 「SCOI2011」糖果
蒟蒻又回来写题解了... 题面 幼儿园里有 N 个小朋友, lxhgww 老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些要求,比如小明不希望小红 ...
- 说一下PHP中die()和exit()区别
PHP手册:die()Equivalent to exit(). 说明:die()和exit()都是中止脚本执行函数:其实exit和die这两个名字指向的是同一个函数,die()是exit()函数的别 ...