你的位置:首页 > 软件开发 > Java > AngularJS中Scope间通讯Demo

AngularJS中Scope间通讯Demo

发布时间:2016-01-22 18:00:43
在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

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。