您的位置：首页 > Web前端 > AngularJS

关于AngularJS controller之间的数据通信

2017-03-20 15:20 603 查看

方法一：

要知道的知识点:

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;
}]);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： angularjs

相关文章推荐

新的分享

章节导航