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中filter(),not(),split()使用方法
Jul 06 Javascript
js 操作符汇总
Nov 08 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
Dec 16 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
Three.js入门之hello world以及如何绘制线
Sep 25 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
layui实现数据分页功能
Jul 27 Javascript
解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题
Nov 14 Javascript
vue项目或网页上实现文字转换成语音播放功能
Jun 09 Javascript
利用前端HTML+CSS+JS开发简单的TODOLIST功能(记事本)
Apr 13 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
利用Ffmpeg获得flv视频缩略图和视频时间的代码
2011/09/15 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
php常用正则函数实例小结
2016/12/29 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
js取整数、取余数的方法
2014/05/11 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
2015/08/10 Javascript
jQuery动态添加
2016/04/07 Javascript
jQuery前端开发35个小技巧
2016/05/24 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库
2016/10/09 Python
Python实现的当前时间多加一天、一小时、一分钟操作示例
2018/05/21 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Python Series从0开始索引的方法
2018/11/06 Python
详解Python Matplotlib解决绘图X轴值不按数组排序问题
2019/08/05 Python
耐克巴西官方网站:Nike巴西
2016/08/14 全球购物
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
施华洛世奇天猫官方旗舰店:SWAROVSKI
2017/04/17 全球购物
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
不打扫卫生检讨书
2014/02/12 职场文书
人大调研汇报材料
2014/08/14 职场文书
升国旗演讲稿
2014/09/05 职场文书
大客户经理岗位职责
2015/04/09 职场文书
少先队工作总结2015
2015/05/13 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
Go使用协程交替打印字符
2021/04/29 Golang