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翻页滚动(示例代码)
Nov 18 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
javascript中的3种继承实现方法
Jan 27 Javascript
Bootstrap布局之栅格系统详解
Jun 13 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
Angular8路由守卫原理和使用方法
Aug 29 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
Dec 09 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
Vue3.0的优化总结
Oct 16 Javascript
cypress测试本地web应用
Jun 01 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/11/03 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP基于单例模式编写PDO类的方法
2016/09/13 PHP
PHP实现的解汉诺塔问题算法示例
2018/08/06 PHP
Laravel 中创建 Zip 压缩文件并提供下载的实现方法
2019/04/02 PHP
PHP封装cURL工具类与应用示例
2019/07/01 PHP
JS解析XML的实现代码
2009/11/12 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
DIV+CSS+jQ实现省市联动可扩展
2016/06/22 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
使用Python进行二进制文件读写的简单方法(推荐)
2016/09/12 Python
Python给你的头像加上圣诞帽
2018/01/04 Python
详解django中使用定时任务的方法
2018/09/27 Python
python查看文件大小和文件夹内容的方法
2019/07/08 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
将tensorflow.Variable中的某些元素取出组成一个新的矩阵示例
2020/01/04 Python
视光学专业毕业生推荐信
2013/10/28 职场文书
西北政法大学自主招生自荐信
2014/01/29 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
文化苦旅读书笔记
2015/06/29 职场文书
防溺水主题班会教案
2015/08/12 职场文书
学习经验交流会总结
2015/11/02 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
数学复习课教学反思
2016/02/18 职场文书
幼儿园中班教学反思
2016/03/03 职场文书
2019消防宣传标语!
2019/07/10 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
100句拼搏进取的名言警句,值得一读!
2019/10/07 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript