在AngularJS中,每一个controller都有对应的Scope,而Scope间有时候需要通讯。比如有如下的一个controller嵌套: <body ng-controller="AppCtrl"> <table ng-cont ...
在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>
$rootScope问题来了,ProductCtrl中需要把product放到cart中,cart中需要获取到product,两者之间
如何通讯呢?→ 在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); }})
→ 在AppCtrl中针对来自CartCtrl中的removeProduct事件
myApp.controller("AppCtrl", function($scope){ $scope.$on("removeProduct", function(evt, data){ console.log(data.name + "removed"); })})
原标题:AngularJS中Scope间通讯Demo
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。