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 CSS样式控制 学习笔记
Jul 23 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
jQuery模拟实现天猫购物车动画效果实例代码
May 25 jQuery
vue基于Element构建自定义树的示例代码
Sep 19 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
微信小程序工具函数封装
Oct 28 Javascript
搭建vscode+vue环境的详细教程
Aug 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
探讨捕获php错误信息方法的详解
2013/06/09 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php实现阿拉伯数字和罗马数字相互转换的方法
2015/04/17 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
2011/11/15 Javascript
通过上下左右键和回车键切换光标实现代码
2013/03/08 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
JavaScript的类型、值和变量小结
2015/07/09 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
2017/08/14 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
[02:42]DOTA2英雄基础教程 杰奇洛
2013/12/23 DOTA
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
Python DataFrame使用drop_duplicates()函数去重(保留重复值,取重复值)
2020/07/20 Python
HTML5之SVG 2D入门5—颜色的表示及定义方式
2013/01/30 HTML / CSS
德国足球商店:OUTFITTER
2019/05/06 全球购物
土木工程实习生自我鉴定
2013/09/19 职场文书
门卫人员岗位职责
2013/12/24 职场文书
法制宣传日活动总结
2014/04/29 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
教师节座谈会主持词
2015/07/03 职场文书
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python
MySQL开启事务的方式
2021/06/26 MySQL
SQLServer常见数学函数梳理总结
2022/08/05 MySQL