AngularJS中Scope间通讯Demo

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在AngularJS中，每一个controller都有对应的Scope，而Scope间有时候需要通讯。比如有如下的一个controller嵌套：

<body ng-controller="AppCtrl"> <table ng-controller = "ProductCtrl">
...
<tr ng-repeat="product in products">
<td>{{$index + 1}}</td>
<td>{{product.name}}</td>
<td>{{product.price | currency }}</td>
<td><button ng-click="addToCart(product)">添加到购物车</button></td>
</tr>
</table> <div ng-controller="CartCtrl">
...
<tr ng-repeat="product in cart">
<td>{{$index+1}}</td>
<td>{{product.name}}</td>
<td>{{product.price | currency}}</td>
<td><button ng-click="removeFromCart(product)">remove</button></td>
</tr>
</div>
</body>

对应的controller部分大致是：

myApp.controller("AppCtrl", function($scope){
$scope.title = "Product Manager";
})myApp.controller("ProductCtrl", function($scope){
$scope.products = [
{name:"", price:50},
...
]; $scope.addToCart = function(){ }
});myApp.controller("CartCtrl", function($scope){
$scope.cart = [];
$scope.removeFromCart = function(product){ }
});

以上，呈现出的Scope间的关系如下：

$rootScope
.....$scope of AppCtrl
..........$scope of ProductCtrl
..........$scope of CartCtrl

问题来了，ProductCtrl中需要把product放到cart中，cart中需要获取到product，两者之间如何通讯呢？

→ 当在ProductCtrl中执行addToCart动作时，让$rootScope发一个广播，通知所有的子Scope

myApp.controller("ProductCtrl", function($scope, $rootScope){
$scope.products = [
{name:"", price:50},
...
]; $scope.addToCart = function(product){
//让$rootScope发一个广播，所有子scope都知道了
$rootScope.$broadcast("addProduct", product);
}
})

可见，$rootScope通过$broadcast方法广播事件，一个实参是事件名称，一个实参是要传递的对象。

→ 在CartCtrl中需要侦听来自$rootScope的事件，同时要把移除product的事件告知更高级别的Scope

myApp.controller("CartCtrl", function($scope){
$scope.cart = []; //子scope要侦听rootScope的事件
$scope.$on("addProduct", add); function add(evt, product){
$scope.cart.push(product);
} $scope.removeFromCart = function(product){
//子scope中的事件告知更高的scope
$scope.$emit("removeProduct", product);
}
})

可见，在子$scope中通过$on方法侦听来自$rootScope的addProduct事件，并执行一个回调函数；如果在子$Scope中执行一个事件要告知更高级别的Scope，这里是removeFromCart事件，需要通过$emit方法，其中第一个实参也是事件名称，第二个实参是传递对象。

→ 在AppCtrl中针对来自CartCtrl中的removeProduct事件

myApp.controller("AppCtrl", function($scope){
$scope.$on("removeProduct", function(evt, data){
console.log(data.name + "removed");
})
})

可见，也是通过$on方法侦听子$scope中emit发出的事件。