你的位置:首页 > Java教程

[Java教程]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发出的事件。