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 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
Feb 03 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
JavaScript获取并更改input标签name属性的方法
Jul 02 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
JS异步加载的三种实现方式
Mar 16 Javascript
使用jQuery实现简单的tab框实例
Aug 22 jQuery
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
微信小程序实现日历功能
Nov 27 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
分享15个Webpack实用的插件!!!
Mar 31 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
php mysql索引问题
2008/06/07 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php加密解密字符串示例
2016/10/13 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
js function定义函数使用心得
2010/04/15 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
2014/10/14 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
2016/01/26 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
javaScript中indexOf用法技巧
2019/11/26 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
Python中用format函数格式化字符串的用法
2015/04/08 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
浅谈Python编程中3个常用的数据结构和算法
2019/04/30 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python为什么会环境变量设置不成功
2020/06/23 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
联想墨西哥官方网站:Lenovo墨西哥
2016/08/17 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
企业管理部经理岗位职责
2013/12/24 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
婚宴邀请函
2015/01/30 职场文书
大学生个人学习总结
2015/02/15 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android