angularjs开发项目中,不同组件通常对应着不同的控制器Controller ,组件之间的通信(如参数的传递,数据的传递)是很常见的场景,下面介绍两种方法:
- 1、基于angular服务的方式(Service)
- 2、基于事件广播的方式($$on、$emit和$broadcast)
这两种方法都可以用于父子和兄弟组件之间的通信
一、基于angular服务的方式:
创建一个自定义服务,在服务中生成一个对象,对象作为存放数据的容器,该服务中的对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:
js:
var app = angular.module('myApp', []);
//自定义服务Myservice
app.factory('Myservice', function(){
return {};
});
app.controller('Ctrltest1', function($scope, Myservice) {
$scope.change = function() {
Myservice.name = $scope.test; //在第一个控制器中为服务对象赋值
};
});
app.controller('Ctrltst2', function($scope, Myservice) {
$scope.add = function() {
$scope.name = Myservice.name; //将第一个控制器中为服务对象赋的值传给第二个控制器
};
});
html:
<div ng-controller='Ctrltest1'>
<input type="text" ng-model="test" />
<div ng-click="change()">click me</div>
</div>
<div ng-controller='Ctrltest2'>
<div ng-click="add()">my name {{name}}</div>
</div>
二、基于事件广播的方式
$on
用于监听事件
$emit
用于向上分发(子作用域向父作用域)
$broadcast
用于向下广播(父作用域向子作用域)
HTML:
1 <div ng-app="app" ng-controller="parentCtr">
2 <div ng-controller="childCtr1">name :
3 <input ng-model="name" type="text" ng-change="change();" />
4 </div>
5 <div ng-controller="childCtr2">Ctr1 name:
6 <input ng-model="ctr2Name" />
7 </div>
8 </div>
js:
var myapp=angular.module("app", [])
myapp.controller("parentCtr",function ($scope) {
//监听来自childCtr1的信息
$scope.$on("Ctr1toparent",function (event, msg) {
console.log("parent", msg);//
//把监听来的信息广播出去
$scope.$broadcast("parenttoCtr", msg);
});
myapp.controller("childCtr1", function ($scope) {
$scope.change = function () {
//childCtr1数据变化后向parentCtr分发信息
$scope.$emit("Ctr1toparent", $scope.name);
};
myapp.controller("childCtr2", function ($scope) {
//监听来自parentCtr的信息
$scope.$on("parenttoCtr",function (event, msg) {
console.log(msg);
$scope.ctr2Name= msg;
});
});
这里childCtr1的name改变会向上传递给父controller,而父controller会对事件包装再广播给所有子controller,而childCtr2则注册了parenttoCtr事件,并改变自己。注意父controller在广播时候一定要改变事件name(把Ctr1toparent改变为parenttoCtr)。
另外,上下级之间的通信还可以用作用域继承方式。
vue组件之间通信:
这篇文章写的非常好
http://www.cnblogs.com/keepfool/p/5637834.html#!comments
- 使用 $on() 监听事件;
- 使用 $emit() 在它上面触发事件;
- 使用 $dispatch() 派发事件,事件沿着父链冒泡;
- 使用 $broadcast() 广播事件,事件向下传导给所有的后代。