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 相关文章推荐
js chrome浏览器判断代码
Mar 28 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
Jan 19 Javascript
Javascript中的window.event.keyCode使用介绍
Apr 26 Javascript
js保留两位小数使用toFixed实现
Jul 29 Javascript
Javascript中typeof 用法小结
May 12 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 Javascript
Vue下的国际化处理方法
Dec 18 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 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 常用类整理
2009/12/23 PHP
windows下PHP_intl.dll正确配置方法(apache2.2+php5.3.5)
2014/01/14 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
php防止表单重复提交实例讲解
2019/02/11 PHP
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
JS+ACTIVEX实现网页选择本地目录路径对话框
2013/03/18 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
JS随机排序数组实现方法分析
2017/10/11 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
vue+SSM实现验证码功能
2018/12/07 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
详解vue项目打包步骤
2019/03/29 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
JavaScript语句错误throw、try及catch实例解析
2020/08/18 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
新大陆软件面试题
2016/11/24 面试题
Java中的类包括什么内容?设计时要注意哪些方面
2012/05/23 面试题
应届行政管理专业个人自我评价
2013/12/28 职场文书
校本教研工作方案
2014/01/14 职场文书
社区十八大感言
2014/01/19 职场文书
法制宣传实施方案
2014/03/13 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2014年艾滋病防治工作总结
2014/12/10 职场文书
Python字符串常规操作小结
2022/04/03 Python
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
我国拿下天问一号火星着陆区附近 22 个地理实体命名:平乐、西柏坡、古田、漠河等
2022/04/29 数码科技