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 17 Javascript
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
Dec 28 Javascript
range 标准化之获取
Aug 28 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
JS Select下拉框(支持输入模糊查询)
Feb 04 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
Mar 13 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
Sep 09 Javascript
js实现开关灯效果
Mar 30 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
不用数据库的多用户文件自由上传投票系统(2)
2006/10/09 PHP
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
PHP向浏览器输出内容的4个函数总结
2014/11/17 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
vant组件中 dialog的确认按钮的回调事件操作
2020/11/04 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python 性能提升的几种方法
2016/07/15 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
利用setuptools打包python程序的方法步骤
2020/01/18 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
python温度转换华氏温度实现代码
2020/12/06 Python
python opencv实现图像配准与比较
2021/02/09 Python
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
css animation配合SVG制作能量流动效果
2021/03/24 HTML / CSS
协议书样本
2014/04/23 职场文书
伊琍体标语
2014/06/25 职场文书
小学数学教研活动总结
2014/07/01 职场文书
审美与表现自我评价
2015/03/09 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python
python数字图像处理:图像简单滤波
2022/06/28 Python