如何让controller之间共享数据呢？大致是让不同controller中的变量指向同一个实例。

通过service创建一个存放共享数据的对象。

  1. .service("greeting", function Greeting(){
  2.     var greeting = this;
  3.  
  4.     greeting.message = "default";
  5. })

让不同的controller中的变量指向Greeting这个实例。

  1. .controller('FirstCtrl', function FirstCtrl(greeting){
  2.     var first = this;
  3.     first.greeting = greeting;
  4. })
  5. .controller('SecondCtrl', function SecondCtrl(greeting){
  6.     var second = this;
  7.     second.greeting = greeting;
  8. })

以上，FirstCtrl和SecondCtrl中的greeting变量都指向Greeting这个实例。这样FirstCtrl和SecondCtrl共享同一个Greeting实例。

具体实现，先看文件结构：
templates/
.....first.html
.....second.html
app.js
index.html

index.html

  1. <!DOCTYPE html>
  2. <html lang="en" ng-app="app">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title></title>
  6.   <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css"/>
  7.   <style>
  8.     body{
  9.       padding:20px;
  10.     }
  11.   </style>
  12. </head>
  13. <body>
  14.  
  15. <div class="container">
  16.   <ui-view></ui-view>
  17. </div>
  18.  
  19. <script src="../../node_modules/angular/angular.min.js"></script>
  20. <script src="../../node_modules/angular-ui-router/build/angular-ui-router.min.js"></script>
  21. <script src="app.js"></script>
  22. </body>
  23. </html>

以上，ui-view是用来呈现不同的视图。

app.js

  1. angular.module('app',['ui.router'])
  2.     .config(function config($stateProvider){
  3.         $stateProvider.state('index',{
  4.             url:"",
  5.             controller: "FirstCtrl",
  6.             controllerAs: "first",
  7.             templateUrl:"templates/first.html"
  8.         });
  9.  
  10.         $stateProvider.state('second',{
  11.             url:"/second",
  12.             controller:"SecondCtrl as second",
  13.             templateUrl: "templates/second.html"
  14.         });
  15.     })
  16.     .service("greeting", function Greeting(){
  17.         var greeting = this;
  18.  
  19.         greeting.message = "default";
  20.     })
  21.     .controller('FirstCtrl', function FirstCtrl(greeting){
  22.         var first = this;
  23.         first.greeting = greeting;
  24.     })
  25.     .controller('SecondCtrl', function SecondCtrl(greeting){
  26.         var second = this;
  27.         second.greeting = greeting;
  28.     })

以上，在angular-ui-router.min.js中封装了ui.router这个module，需要依赖它。

first.html

  1. <input type="text" ng-model="first.greeting.message"/>
  2.  
  3. <div ng-class="first.greeting.message">
  4.   {{first.greeting.message}} {{'world'}}
  5. </div>
  6.  
  7. <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之间共享数据的更多相关文章

  1. 学习笔记4_ServletContext（重要整个Web应用的动态资源之间共享数据）

    ServletContext(重要) 一个项目只有一个ServletContext对象! 我们可以在N多个Servlet中来获取这个唯一的对象,使用它可以给多个Servlet传递数据! 与天地同寿!! ...

  2. Android应用程序组件Content Provider在应用程序之间共享数据的原理分析

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6967204 在Android系统中,不同的应用 ...

  3. VC++共享数据段实现进程之间共享数据

    当我写了一个程序,我希望当这个程序同时运行两遍的时候,两个进程之间能共享一些全局变量,怎么办呢?很简单,使用VC\VC++的共享数据段.; #pragma data_seg()//恢复到正常段继续编程 ...

  4. 多线程（四） 实现线程范围内模块之间共享数据及线程间数据独立（Map集合）

    多个线程访问共享对象和数据的方式 1.如果每个线程执行的代码相同,可以使用同一个Runnable对象,这个Runnable对象中有那个共享数据,例如,买票系统就可以这么做. 2.如果每个线程执行的代码 ...

  5. 多线程（三） 实现线程范围内模块之间共享数据及线程间数据独立（ThreadLocal）

    ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.JDK 1.2的版本中就提供java.lang.ThreadLocal,使用这个工具类可以很简洁地编写出优美的多线程程序,Threa ...

  6. Python 进程之间共享数据

    最近遇到多进程共享数据的问题,到网上查了有几篇博客写的蛮好的,记录下来方便以后查看. 一.Python multiprocessing 跨进程对象共享  在mp库当中,跨进程对象共享有三种方式,第一种 ...

  7. Python 进程之间共享数据(全局变量)

    进程之间共享数据(数值型): import multiprocessing def func(num): num.value=10.78 #子进程改变数值的值,主进程跟着改变 if __name__= ...

  8. 面试之路（13）-android apk之间共享数据的方式以及shareUserId详解

    1.通过content Provider/sharedPreferrence 2.通过shareUserId 我们详细介绍一下shareUserId: Android App Sandbox(andr ...

  9. WCF各个Service之间共享数据

    为了实现cache存储验证用户身份信息,减少通过数据库验证的次数,需要在wcf各个服务之间建立共享数据区. namespace WcfService1 {     public static clas ...

随机推荐

  1. MYSQL问题解决

    1. MySQL错误日志里出现: 140331 10:08:18 [ERROR] Error reading master configuration 140331 10:08:18 [ERROR] ...

  2. linux系统下安装nginx

    1.第一步:获取nginx的安装包 wget http://nginx.org/download/nginx-1.7.8.tar.gz 2.解压安装包tar -xvf nginx-1.7.8.tar. ...

  3. python抓取猫眼电影列表

    抓取地址:http://maoyan.com/board/4 分析url分页规则:http://maoyan.com/board/4?offset=0 其中offset参数值为0到90 用到的库: P ...

  4. shell升级完整记录

    [root@localhost bash-4.3.30]# cat Makefile |grep prefix prefix = /usr/local exec_prefix = ${prefix} ...

  5. css实现导航切换

    css实现导航切换 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <title>css实现导航切换&l ...

  6. CentOS 7.x 安装 Docker

    安装之前确保之前没有安装过docker为此首先删除存在的docker程序 sudo yum remove docker \ docker-common \ docker-selinux \ docke ...

  7. 浏览器输入URL后发生了什么

    假如在浏览器中输入了www.cnblogs.com,然后回车 DNS解析 浏览器检查浏览器缓存是否有域名对应的IP. 浏览器查找操作系统是否有对应的DNS解析成果(hosts文件). 查找路由器缓存. ...

  8. hdu 1213 求连通分量（并查集模板题）

    求连通分量 Sample Input2 //T5 3 //n m1 2// u v2 34 5 5 12 5 Sample Output24 # include <iostream> # ...

  9. hdu 5038 （2014北京网络赛G 排序水题）

    题意:有n个数字,带入10000 - (100 - ai) ^ 2公式得到n个数,输出n个数中频率最大的数,如果有并列就按值从小到大都输出输出,如果频率相同的数字是全部的n个数,就输出Bad....题 ...

  10. yum list失败

    搭建了本地yum源,用yum list 测试报如下错误: [root@heguol ~]# yum   list error: rpmdb: BDB0113 Thread/process ye67ww ...