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 相关文章推荐
浏览器常用高宽的jquery插件
Feb 24 Javascript
Jquery 绑定时间实现代码
May 03 Javascript
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
Nov 15 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
Dec 07 Javascript
详解webpack 最简打包结果分析
Feb 20 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
基于原生js实现九宫格算法代码实例
Jul 03 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
php中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
php Hex RGB颜色值互换的使用
2013/05/10 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php 人员权限管理(RBAC)实例(推荐)
2017/05/24 PHP
表单提交验证类
2006/07/14 Javascript
ExtJs 3.1 XmlTreeLoader Example Error
2010/02/09 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
深入理解JavaScript系列(9) 根本没有“JSON对象”这回事!
2012/01/15 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
java与javascript之间json格式数据互转介绍
2013/10/29 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
纯JS实现本地图片预览的方法
2015/07/31 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
js老生常谈之this,constructor ,prototype全面解析
2016/04/05 Javascript
Angular2 (RC5) 路由与导航详解
2016/09/21 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
javascript中的面向对象
2017/03/30 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
Vue引用Swiper4插件无法重写分页器样式的解决方法
2018/09/27 Javascript
10种JavaScript最常见的错误(小结)
2019/06/21 Javascript
JS实现单张或多张图片持续无缝滚动的示例代码
2020/05/10 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
js编写简易的计算器
2020/07/29 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python实现多进程的四种方式
2019/02/22 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
国贸专业个人求职信分享
2013/12/04 职场文书
母亲七十大寿答谢词
2014/01/18 职场文书
合作意向书
2014/07/30 职场文书
党员批评与自我批评
2014/10/15 职场文书
采购内勤岗位职责
2015/04/13 职场文书
《富饶的西沙群岛》教学反思
2016/02/16 职场文书
分析Netty直接内存原理及应用
2021/06/14 Java/Android