如何让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之间共享数据的更多相关文章

  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. 利用VBS下载EXE文件手法记录

    1.信息来源 疑似朝鲜通过鱼叉攻击韩国统一部记者的APT事件整理 https://mp.weixin.qq.com/s/4IFV31MBNbANnCVaJj7ZPQ https://twitter.c ...

  2. [SDOI2009]HH去散步 「矩阵乘法计数」

    计数问题也许可以转化为矩阵乘法形式 比如若该题没有不能在一条边上重复走的条件限制,那么直接将邻接矩阵转化为矩阵乘法即可 故 矩阵乘法计数 对于计数问题,若可以将 \(n\) 个点表示成 \(n \ti ...

  3. 测试开发之前端——No3.HTML5中的标准属性

    HTML5的标准属性 属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类). contentedit ...

  4. **15.app后端怎么设计用户登录方案(API权限安全)

    在很多app中,都需要用户的登录操作.登录,就需要用到用户名和密码.为了安全起见,暴露明文密码的次数越少越好.怎么能最大程度避免泄露用户的密码呢?在登录后,app后端怎么去验证和维持用户的登录状态呢? ...

  5. StringUtils一些常用方法

    StringUtils是org.apache.commons.lang jar包里面的类方法,当输入参数String为null则不会抛出NullPointerException,而是做了相应处理,nu ...

  6. for-in循环(for-in Loops)

    for-in循环应该用在非数组对象的遍历上,使用for-in进行循环也被称为“枚举”. 从技术上将,你可以使用for-in循环数组(因为JavaScript中数组也是对象),但这是不推荐的.因为如果数 ...

  7. ps不显示命令本身的进程号

    当我们查看某个服务的进程时候,它会把命令本身的进程显示出来.如下图: 进程号2383 就是我命令本身的进程号,和我实际想看的进程无关 特别是在我们写脚本,kill进程时候会报错: 解决办法可以优化脚本 ...

  8. Java之路（一） 一切皆对象

    Java语言假设我们只进行面向对象的程序设计,即在开始用Java进行设计前,我们需要将思想切换到面向对象的世界中. 1.用引用操纵对象 每种编程语言都有自己操纵内存中元素的方式.是直接操纵元素还是用某 ...

  9. QT5 样式随笔

    Qt的窗口背景及窗口风格统一与焕肤 button = new QPushButton(this);button->setStyleSheet("QPushButton{color:re ...

  10. java实现最小堆

    1.堆:通常通过二叉堆,实为二叉树的一种,分为最小堆和最大堆,具有以下性质: 任意节点小于它的所有后裔,最小元在堆的根上. 堆总是一棵完全树 将根节点最大的堆叫做最大堆或大根堆,根节点最小的堆叫做最小 ...