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代码
Jul 01 Javascript
JQuery 常用方法基础教程
Feb 06 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
vue.js 上传图片实例代码
Jun 22 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
JS实现数组的增删改查操作示例
Aug 29 Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 Javascript
vue渲染方式render和template的区别
Jun 05 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 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
php结合表单实现一些简单功能的例子
2011/06/04 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
react native带索引的城市列表组件的实例代码
2017/08/08 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
[03:24]2014DOTA2国际邀请赛 神秘商店生意火爆
2014/07/18 DOTA
[03:44]2015国际邀请赛选手档案—Cloud9.NoTail
2015/07/28 DOTA
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
谈一谈基于python的面向对象编程基础
2019/05/21 Python
python_mask_array的用法
2020/02/18 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
python实现简单猜单词游戏
2020/12/24 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
中东奢侈品市场:Coveti
2019/05/12 全球购物
为什么使用接口?
2014/08/13 面试题
财务管理专业推荐信
2013/11/19 职场文书
拖鞋店创业计划书
2014/01/15 职场文书
年度评优评先方案
2014/06/03 职场文书
《落花生》教学反思
2016/02/16 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android