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 相关文章推荐
fix-ie5.js扩展在IE5下不能使用的几个方法
Aug 20 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
分享JavaScript与Java中MD5使用两个例子
Dec 23 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
react-native android状态栏的实现
Jun 15 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
详细分析JavaScript中的深浅拷贝
Sep 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
MySQL授权问题总结
2007/05/06 PHP
Windows下安装Memcached的步骤说明
2010/04/25 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
php redis实现文章发布系统(用户投票系统)
2017/03/04 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
JavaScript高级程序设计 阅读笔记(四) ECMAScript中的类型转换
2012/02/27 Javascript
js编码、解码函数介绍及其使用示例
2013/09/05 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
JS调用安卓手机摄像头扫描二维码
2018/10/16 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
在weex中愉快的使用scss的方法步骤
2020/01/02 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
2020/07/19 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
python用match()函数爬数据方法详解
2019/07/23 Python
重写django的model下的objects模型管理器方式
2020/05/15 Python
通过代码简单了解django model序列化作用
2020/11/12 Python
CSS3 实现的加载动画
2020/12/07 HTML / CSS
html5实现微信打飞机游戏
2014/03/27 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
二年级评语大全
2014/04/23 职场文书
经营目标管理责任书
2014/07/25 职场文书
工作时间调整通知
2015/04/24 职场文书
暂停营业通知
2015/04/25 职场文书
通知函格式范文
2015/04/27 职场文书
法制主题班会教案
2015/08/13 职场文书
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技