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.extend 函数的详细用法
Jun 27 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
Jquery实现textarea根据文本内容自适应高度
Apr 03 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
第七章之菜单按钮图标组件
Apr 25 Javascript
浅谈Vue.js
Mar 02 Javascript
JS设计模式之状态模式概念与用法分析
Feb 05 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
原生js实现移动小球(碰撞检测)
Dec 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
form自动提交实例讲解
2017/07/10 PHP
php使用scandir()函数扫描指定目录下所有文件示例
2019/06/08 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
DOM下的节点属性和操作小结
2009/05/14 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
Javascript学习笔记一 之 数据类型
2010/12/15 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
AngularJS中的包含详细介绍及实现示例
2016/07/28 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
探寻python多线程ctrl+c退出问题解决方案
2014/10/23 Python
对于Python的Django框架使用的一些实用建议
2015/04/03 Python
Python 两个列表的差集、并集和交集实现代码
2016/09/21 Python
详解如何在css中引入自定义字体(font-face)
2018/05/17 HTML / CSS
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
《颐和园》教学反思
2014/02/26 职场文书
党建工作先进材料
2014/05/02 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python