关于AngularJS controller之间的数据通信
来源:互联网 发布:测试显示器的软件 编辑:程序博客网 时间:2024/05/21 02:33
方法一:
要知道的知识点:
1. broadcast会把事件广播给所有子controller;
2. emit则会将事件冒泡传递给父controller;
3. $on则是angularjs的事件注册函数;
接下来我们就来看一个具体的实例代码:
首先是html代码,这个结构也比较简单,就是一个父控制器下分别有childController和childController2这两个子控制器:
<body ng-app="myApp"> <div ng-controller="parentController"> <div ng-controller="childController"> <input ng-change="change(name)" ng-model="name" type="text" placeholder="请在此处输入内容..."> </div> <div ng-controller="childController2"> <h1>下面就是value值</h1> {{ wenzi }} </div> </div> </body>
接下来就是操作的angular代码:
var app = angular.module('myApp',[]);app.controller('parentController',['$scope',function($scope){ //接收子控制器传递上来的值; $scope.$on('doName',function(e,msg){ //将接收到的这个值广播给所有的子控制器; $scope.$broadcast('commonName',msg); });}]).controller('childController',['$scope',function($scope){ $scope.change = function(name){ //这里接收到input框输入的value值,并把它emit到父控制器上; $scope.$emit('doName',name); };}]).controller('childController2',['$scope',function($scope){ $scope.$on('commonName',function(e,msg){ //获取到父控制器广播的内容; $scope.wenzi = msg; });}]);
方法二:
- AngualrJS中的controller是一个函数,主要是用来向$scope中添加功能,我们一般用它来给作用域对象设置初始状态,并添加自定义行为;
- 当我们在创建一个控制器的时候,angularjs会帮我们生成并传递一个新的
scope对象给这个controller,另外在angularjs应用中的任意一个部分,都有父级作用域的存在,顶级就是ng−app所在的那个层级,而父级作用域就是 rootScope. - 每个
scope的 root指向rootScope,而 scope.$parent指向的是父级作用域。 - controller之间的通信本质上是当前的controller所在的
scope如何跟其他controller上的 scope进行通信。
接下来介绍通过$rootScope实现controller通信的方式:
首先是html代码,和方法一中的差不多,区别只是我把包裹着的父控制器去掉了,表示,同级别的也可以进行传递,不需要再通过我们自己定义的父控制器;
<body ng-app="myApp"> <div> <div ng-controller="childController"> <input ng-change="change(name)" ng-model="name" type="text" placeholder="请在此处输入内容..."> </div> <div ng-controller="childController2"> <h1>下面就是value值</h1> {{ $root.wenzi }} </div> </div> </body>
接下来就是angular代码了:
注意: angularJS中默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到rootScope。如果在 rootScope中也无法找到程序依旧运行,但视图不会更新。
var app = angular.module('myApp', []);app.controller('childController', ['$scope', '$rootScope', function($scope, $rootScope) { $scope.change = function(name) { $rootScope.wenzi = name; }; }]) .controller('childController2', ['$scope', '$rootScope', function($scope, $rootScope) { $scope.wenzi = $rootScope.wenzi; }]);
1 0
- 关于AngularJS controller之间的数据通信
- angularjs controller之间的通信
- angularjs Controller之间的通信
- angularjs Controller之间的通信
- AngularJS controller之间的通信机制
- 关于安卓组件之间数据通信的总结
- AngularJS控制器controller之间通信
- angularJS的controller之间如何正确的通信
- angularJS的controller之间如何正确的通信
- 【转】angularJS的兄弟controller之间如何正确的通信
- angularJS控制器controller之间的3种通信方式
- AngularJS学习之Controller控制器之间的通信
- 关于angular controller之间的通信
- [爬坑]关于angularJS的controller文件压缩的问题
- CCNotificationCenter实现类之间的数据通信
- WM_COPYDATA进行进程之间的数据通信
- 进程之间数据通信的方法(一)
- Fragment与Fragment之间的数据通信
- 通向架构师的道路(第二十一天)万能框架spring(三)之SSH
- asp .net mvc支付宝支付服务端demo
- 利用swfupload实现java文件批量上传
- Web前端资源汇总
- glide:缩放图片
- 关于AngularJS controller之间的数据通信
- 通向架构师的道路(第二十二天)万能框架spring(四)使用struts2
- 在eclipse下运行hadoop程序
- HTTP扫盲
- Android应用优化之布局优化
- java开发资源分享(视频,源码,项目)
- memmove函数
- CodeForces 208E Blood Cousins
- linux下 强大的convert命令