关于AngularJS controller之间的数据通信
发布时间:2020-12-17 09:30:53 所属栏目:安全 来源:网络整理
导读:方法一: 要知道的知识点: 1. broadcast会把事件广播给所有子controller; 2. emit则会将事件冒泡传递给父controller; 3. $on则是angularjs的事件注册函数; 接下来我们就来看一个具体的实例代码: 首先是html代码,这个结构也比较简单,就是一个父控制器下分
方法一:要知道的知识点: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',function($scope){
$scope.change = function(name){
//这里接收到input框输入的value值,并把它emit到父控制器上;
$scope.$emit('doName',name);
};
}])
.controller('childController2',function($scope){
$scope.$on('commonName',msg){
//获取到父控制器广播的内容;
$scope.wenzi = msg;
});
}]);
方法二:
接下来介绍通过$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中默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到
|