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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
JavaScript 在各个浏览器中执行的耐性
Apr 06 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
轻量级javascript 框架Backbone使用指南
Jul 24 Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 Javascript
React 组件间的通信示例
Jun 14 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
express 项目分层实践详解
Dec 10 Javascript
javascript执行上下文、变量对象实例分析
Apr 25 Javascript
JS实现点击掉落特效
Jan 29 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
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
使用PHP导出Word文档的原理和实例
2013/10/21 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
js获取某元素的class里面的css属性值代码
2014/01/16 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
2014/08/30 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
javascript常用功能汇总
2015/07/05 Javascript
JavaScript代码判断点击第几个按钮
2015/12/13 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
js实现按座位号抽奖
2017/04/05 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
关于JS模块化的知识点分享
2019/10/16 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python 计算任意两向量之间的夹角方法
2019/07/05 Python
python 随机森林算法及其优化详解
2019/07/11 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python学习之os模块及用法
2020/06/03 Python
Python趣味入门教程之循环语句while
2020/08/26 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
HTML5和以前HTML4的区别整理
2013/10/20 HTML / CSS
酒店办公室文员岗位职责
2013/12/18 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
幽灵公主观后感
2015/06/09 职场文书
PHP解决高并发问题
2021/04/01 PHP
Kubernetes控制节点的部署
2022/04/01 Servers