为了在控制器之间共享数据，需要在服务中添加一个用来储存用户名的方法。记住，服务在

应用的生命周期内是单例模式的，因此可以将用户名安全地储存在其中。

<!DOCTYPE html>

<html>

<head>

    <meta  charset="utf-8">

    <title>12-angularjs的多个控制器数据共享</title>

    <script src="../js/angularjs.js"></script>

    <script src="../js/index12.js"></script>

</head>

<body>

<!-- angularjs的数据绑定，双向绑定，M,V,c之间的绑定 -->

    <div ng-app="myApp">

        <div ng-controller= "firstController">

            <input type="text" ng-model="person.name" value="" />

                firstData--{{person.name}}

        </div>

        <div ng-controller="secondController">

            <input type="text"  value="" />

                secondData--{{person.name}}

        <div ng-controller= "firstController">

            <input type="text" ng-model="Data.message" value="" />

                firstData--{{Data.message}}

        </div>

        <div ng-controller="secondController">

            <input type="text"  value="" />

                secondData--{{Data.message}}

        </div>

        </div>

    </div>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var myApp
= angular.module('myApp',
[]);
 
myApp.factory('Data', function(){
    return {message:'小平果'};
 
});
 
myApp.controller('firstController',  function($scope,Data){
    $scope.person
= {
        name: "肖果平"
    };
 
    $scope.Data
= Data;
});
 
myApp.controller('secondController',  function($scope,Data){
    $scope.person
= $scope.$$prevSibling.person;//基本类型不能变的，只有对象才能引用
    $scope.Data
= Data;
});

　　

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

angularJS--多个控制器之间的数据共享的更多相关文章

  1. angularjs控制器之间的数据共享与通信

    1.可以写一个service服务,从而达到数据和代码的共享; var app=angular.module('app',[]); app.service('ObjectService', [Objec ...

  2. AngularJS中控制器之间通信方法

    在同个angular应用的控制器之间进行通信可以有很多种不同的方式,本文主要讲两种: 基于scope继承的方式和基于event传播的方式 基于scope继承的方式 最简单的让控制器之间进行通信的方法是 ...

  3. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  4. angularJS控制器之间的相互通信方式、$broadcast、$emit、$on

    在项目中,我们可能会很经常性的利用到控制器之间的相互通信,在angular中的控制器之间的相互通信有以下几种方式: 1)通过本地数据的存储localstorage,sessionstorage, 2) ...

  5. angularjs探秘<三> 控制器controller及angular项目结构

    先来看一个例子 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&quo ...

  6. AngularJS入门基础——控制器

    AngularJS中的控制器是一个函数,用来向视图的作用域添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. AngularJS同其他JavaScript框架最主要的一个区别就是, ...

  7. angular开发控制器之间的通信

    一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...

  8. angular中控制器之间传递参数的方式

    在angular中,每个controller(控制器)都会有自己的$scope,通过为这个对象添加属性赋值,就可以将数据传递给模板进行渲染,每个$scope只会在自己控制器内起作用,而有时候需要用到其 ...

  9. angular 控制器之间的通信

    1, 利用作用域的继承方式 由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域 ...

随机推荐

  1. TCP连接建立系列 — TCP选项解析

    本文主要分析:在收到客户端的SYN包时,服务器端是如何解析它所携带的TCP选项,并结合本端情况决定是否予以支持. 内核版本:3.6 Author:zhangskd @ csdn blog 概述 收到客 ...

  2. C语言笔试经典-查找多位数重复数字以及次数

    从键盘输入一个多位的整数 用程序判断 这个数里面有没有 重复的数字  有重复的数字就打印  哪个数字重复了  重复了几次 例如:输入:1122431 打印结果: 1重复 出现3次 2重复 出现2次, ...

  3. SharePoint 自定义列表页面定制续—[保存模板后不能正常使用]

    背景:SharePoint列表的四个基本页样式不是特别的好,所以很多情况都需要重新定制,然而经过定制后,又发生了新的问题,就是存成模板,再建新的列表的时候,定制的页面不能正常显示了. 1. 定制后的页 ...

  4. Java不走弯路教程（6.JDBC）

    6.JDBC 在上一章,我们完成了MyDb数据库的简单的客户段调用.作为产品我们还封装了驱动程序,并且提供了统一的调用接口. 大家应该知道,市面上有多种数据库产品,比如Oracle,Mysql,DB2 ...

  5. JQuery常用功能的性能优化

    使用最佳选择器 通常比较常用的选择器有以下几个: 1.ID选择器 $("#id") 2.标签选择器 $("td") 3.类选择器 $(".target ...

  6. 【转载】tomcat+nginx+redis实现均衡负载、session共享(一)

    http://www.cnblogs.com/zhrxidian/p/5432886.html 在项目运营时,我们都会遇到一个问题,项目需要更新时,我们可能需先暂时关闭下服务器来更新.但这可能会出现一 ...

  7. nginx 反向代理，支持跨域，前后分离

    前端开发往往涉及到跨域问题,其中解决方案很多: 1.jsonp 需要目标服务器配合一个callback函数. 2.window.name+iframe 需要目标服务器响应window.name. 3. ...

  8. 关于如何通过kali linux 攻击以及破解WPA/WPA2无线加密

    http://blog.csdn.net/wingstudio_zongheng/article/details/51435212 1.前期准备 1)打开一个终端  执行命令: ifconfig   ...

  9. Jmeter(二十七)_Beanshell保存响应内容到本地

    利用Jmeter-BeanShell PostProcessor可以提取响应结果并保存到本地文件,这种操作在jmeter做爬虫时非常有用,可以帮助你迅速的获取想要的内容到本地文件! 1:在本地新建一个 ...

  10. java之MVC开发模式

    友情提醒:eclipse创建servlet不会帮你同步创建一个web.xml配置文件:所以建议使用MyEclipse! 1.View层(jsp) <form action="javaw ...