AngularJS实现controller控制器间共享数据的方法示例


Posted in Javascript onOctober 30, 2017

本文实例讲述了AngularJS实现controller控制器间共享数据的方法。分享给大家供大家参考,具体如下:

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>3water.com 控制器间共享数据</title>
  <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="external nofollow" > 
  <style>
    body { 
      padding-top:30px; 
    }
  </style>
  <script src="angular.min.js"></script> 
  <script>
    angular.module('myapp', [])
    .factory("Data", function() {
      return {
        msg:"hello world"
      };
    })
    .controller("CtrlF", function($scope, Data) {
      $scope.data = Data;
    })
    .controller("CtrlS", function($scope, Data) {
      $scope.data = Data;
    });
  </script>
</head>
<body>
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<div ng-controller="CtrlF">
  <input type="text" ng-model="data.msg">
  <h1>{{data.msg}}</h1>
</div>
<div ng-controller="CtrlS">
  <input type="text" ng-model="data.msg">
  <h1>{{data.msg}}</h1>
</div>
</div><!-- col-sm-8 -->
</div><!-- /container -->
</body>
</html>

运行效果:

AngularJS实现controller控制器间共享数据的方法示例

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
JavaScript使用prototype定义对象类型(转)[
Dec 22 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件
Jan 27 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
解决vue移动端适配问题
Dec 12 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
Feb 21 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
Angularjs按需查询实例代码
Oct 30 #Javascript
Vue中正确使用jQuery的方法
Oct 30 #jQuery
ES6 javascript中Class类继承用法实例详解
Oct 30 #Javascript
轻松理解vue的双向数据绑定问题
Oct 30 #Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 #jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 #Javascript
ES6 javascript的异步操作实例详解
Oct 30 #Javascript
You might like
模仿OSO的论坛(五)
2006/10/09 PHP
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
实例解析php的数据类型
2018/10/24 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
2009/05/25 Javascript
JavaScript中常用的运算符小结
2012/01/18 Javascript
jQuery判断一个元素是否可见的方法
2015/06/05 Javascript
jquery实现下拉框功能效果【实例代码】
2016/05/06 Javascript
关于Javascript回调函数的一个妙用
2016/08/29 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
python使用Image处理图片常用技巧分析
2015/06/01 Python
python图片验证码生成代码
2016/07/02 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
Python学习之time模块的基本使用
2021/01/17 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
医药代表个人的求职信分享
2013/12/08 职场文书
小学毕业感言50字
2014/02/16 职场文书
关于抽烟的检讨书
2014/02/25 职场文书
亮化工程实施方案
2014/03/17 职场文书
低碳生活倡议书
2014/04/14 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
体育教师个人工作总结
2015/02/09 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书