AngularJS实现controller控制器间共享数据的方法示例
更新时间：2017年10月30日 10:55:54 作者：timelessmemoryli
这篇文章主要介绍了AngularJS实现controller控制器间共享数据的方法,结合简单实例形式分析了AngularJS控制器数据共享的实现方法,需要的朋友可以参考下
本文实例讲述了AngularJS实现controller控制器间共享数据的方法。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<title>www.jb51.net 控制器间共享数据</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相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
您可能感兴趣的文章:
- AngularJS控制器controller正确的通信的方法
- AngularJs学习第五篇从Controller控制器谈谈$scope作用域
- AngularJS控制器controller给模型数据赋初始值的方法
- 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
- AngularJS 控制器 controller的详解
- AngularJS利用Controller完成URL跳转
- Angularjs中controller的三种写法分享
- angularJS+requireJS实现controller及directive的按需加载示例
- Angularjs的Controller间通信机制实例分析
相关文章
本篇文章主要介绍了详解使用angular的HttpClient搭配rxjs ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
今天小编就为大家分享一篇AngularJS 监听变量变化的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
AngularJS 表单和控件可以验证输入的数据。本文给大家介绍Angular 输入框实现自定义验证功能，非常不错，具有参考借鉴价值，需要的朋友参考下2017-02-02
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
这篇文章主要介绍了AngularJS出现$http异步后台无法获取请求参数问题的解决方法,较为详细的分析了AngularJS出现异步请求后台无法解析的原因与相应的解决方法,需要的朋友可以参考下2016-11-11
这篇文章主要为大家纤细介绍了AngularJS directive返回对象属性的相关内容，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了AngularJS使用指令增强标准表单元素功能，包括数据绑定、建立模型属性、验证表单等，感兴趣的小伙伴们可以参考一下2016-07-07
本文通过一段实例代码给大家简单介绍了angularjs模仿form表单提交的方法，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-12-12
Angular中$cacheFactory的作用和用法实例详解
$cacheFactory是一个为Angular服务生产缓存对象的服务。接下来通过本文给大家介绍Angular中$cacheFactory的作用和用法实例详解，非常不错，感兴趣的朋友一起看下吧2016-08-08
Angular4.x Event (DOM事件和自定义事件详解)
今天小编就为大家分享一篇Angular4.x Event (DOM事件和自定义事件详解)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了Angular.js 实现数字转换汉字实例代码的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-07-07
最新评论