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 建设银行登陆键盘
Jun 10 Javascript
Javascript学习笔记-详解in运算符
Sep 13 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
删除条目时弹出的确认对话框
Jun 05 Javascript
JavaScript中switch判断容易犯错的一个细节
Aug 27 Javascript
javascript中innerText和innerHTML属性用法实例分析
May 13 Javascript
jQuery实现鼠标滑过点击事件音效试听
Aug 31 Javascript
简洁实用的BootStrap jQuery手风琴插件
Aug 31 Javascript
在React中如何优雅的处理事件响应详解
Jul 24 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
javascript开发实现贪吃蛇游戏
Jul 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
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
javascript制作2048游戏
2015/03/30 Javascript
JavaScript实现图片轮播的方法
2015/07/31 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
JavaScript学习笔记之ES6数组方法
2016/03/25 Javascript
原生js实现无限循环轮播图效果
2017/01/20 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
浅谈Angular 中何时取消订阅
2017/11/22 Javascript
JS实现简单获取最近7天和最近3天日期的方法
2018/04/18 Javascript
vue权限路由实现的方法示例总结
2018/07/29 Javascript
vue展示dicom文件医疗系统的实现代码
2018/08/27 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
python利用多种方式来统计词频(单词个数)
2019/05/27 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
Python要求O(n)复杂度求无序列表中第K的大元素实例
2020/04/02 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
复古服装:RetroStage
2019/05/10 全球购物
初中生学习生活的自我评价
2013/11/20 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2014年预算员工作总结
2014/12/05 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
python通过函数名调用函数的几种方法总结
2021/06/07 Python
SpringBoot整合Redis入门之缓存数据的方法
2021/11/17 Redis
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA