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 相关文章推荐
总结一些js自定义的函数
Aug 05 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 Javascript
javascript常用的正则表达式实例
May 15 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
浅谈Ant Design Pro 菜单自定义 icon
Nov 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
phpize的深入理解
2013/06/03 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
js cookies实现简单统计访问次数
2009/11/24 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
2011/11/07 Javascript
JavaScript之自定义类型
2012/05/04 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
2016/05/28 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
js实现交通灯效果
2017/01/13 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
微信小程序实现tab和swiper切换结合效果
2020/07/17 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
基于vue实现一个禅道主页拖拽效果
2019/05/27 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
python中关于日期时间处理的问答集锦
2013/03/08 Python
python以环状形式组合排列图片并输出的方法
2015/03/17 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
python批量制作雷达图的实现方法
2016/07/26 Python
python机器学习之KNN分类算法
2018/08/29 Python
python组合无重复三位数的实例
2018/11/13 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
Python实现疫情通定时自动填写功能(附代码)
2020/05/27 Python
pycharm中leetcode插件使用图文详解
2020/12/07 Python
获取邓白氏信用报告:Dun & Bradstreet
2019/01/22 全球购物
工业设计专业推荐信
2013/10/29 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
副护士长竞聘演讲稿
2014/04/30 职场文书
小学校本培训方案
2014/06/06 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
2014年涉外离婚协议书范本
2014/11/20 职场文书
Android学习之BottomSheetDialog组件的使用
2022/06/21 Java/Android