如何让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. js async await 终极异步解决方案

    既然有了promise 为什么还要有async await ? 当然是promise 也不是完美的异步解决方案,而 async await 的写法看起来更加简单且容易理解. 回顾 Promise Pr ...

  2. 07 Go 1.7 Release Notes

    Go 1.7 Release Notes Introduction to Go 1.7 Changes to the language Ports Known Issues Tools Assembl ...

  3. Android 7.0 行为变更

    Android 7.0 除了提供诸多新特性和功能外,还对系统和 API 行为做出了各种变更.本文重点介绍您应该了解并在开发应用时加以考虑的一些主要变更. 如果您之前发布过 Android 应用,请注意 ...

  4. vysor原理以及Android同屏方案

    vysor是一个免root实现电脑控制手机的chrome插件,目前也有几款类似的通过电脑控制手机的软件,不过都需要root权限,并且流畅度并不高.vysor没有多余的功能,流畅度也很高,刚接触到这款插 ...

  5. .net4.0切换2.0时，SplitContainer”的对象强制转换为类型

    问 题:将dotnet framework 4.0 切换到2.0时,编译没有问题,在运行时出现如下错误:System.InvalidCastException: 无法将类型为“System.Windo ...

  6. stylus项目知识点

    1.在项目中,引入.sty文件的时候,用来下面方式 @import "~common/stylus/variable.styl" ~ 是stylus的写法,参考https://gi ...

  7. vue之给a标签赋值

    <li v-for="(bp,index) in bpLists"> <a class="bidPublicityTitle" :href=& ...

  8. 2018-2019-2 网络对抗技术 20165301 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165301 Exp4 恶意代码分析 实验内容 系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分 ...

  9. 【BZOJ】3456: 城市规划（多项式求ln）

    题解 在我写过分治NTT,多项式求逆之后 我又一次写了多项式求ln 我们定义一个数列的指数型生成函数为 \(\sum_{i = 0}^{n} \frac{A_{i}}{i!} x^{i}\) 然后这个 ...

  10. P2858 [USACO06FEB]奶牛零食Treats for the Cows

    P2858 [USACO06FEB]奶牛零食Treats for the Cows区间dp,级像矩阵取数, f[i][i+l]=max(f[i+1][i+l]+a[i]*(m-l),f[i][i+l- ...