AngularJS的学习--$on、$emit和$broadcast的使用

最新推荐文章于 2019-06-19 17:42:17 发布

muyue1990

最新推荐文章于 2019-06-19 17:42:17 发布

阅读量265

点赞数

本文介绍AngularJS中作用域的概念及$on、$emit和$broadcast的使用方法，演示了如何在不同控制器间传递事件和数据。

AngularJS的学习--$on、$emit和$broadcast的使用

博客分类：
AngularJS

javaScript angularJS

AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app)，然后其他所有的作用域部分都是继承自这个$rootScope的，或者说都是嵌套在主作用域下面的。很多时候，你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么。

那么在这种情况下，如何在作用域之间通信呢？其中一个选择就是在应用程序作用域之中创建一个单例服务，然后通过这个服务处理所有子作用域的通信。

在AngularJS中还有另外一个选择：通过作用域中的事件处理通信。但是这种方法有一些限制；例如，你并不能广泛的将事件传播到所有监控的作用域中。你必须选择是否与父级作用域或者子作用域通信。

$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。
1.$emit只能向parent controller传递event与data
2.$broadcast只能向child controller传递event与data
3.$on用于接收event与data
实例如下：

     Js代码  
     
    
 <!DOCTYPE html>  
 <html ng-app="ngApp">  
 <head>  
     <meta charset="utf-8" />  
     <title>AngularJS的学习--$on、$emit和$broadcast的使用</title>  
     <script type="text/javascript" src="lib/jquery-1.8.3.js"></script>  
     <script type="text/javascript" src="lib/angular.js"></script>  
 </head>  
 <body>  
     <div ng-controller="ParentCtrl">                <!--父级-->  
         <div ng-controller="SelfCtrl">              <!--自己-->  
             <a ng-click="click()">click me</a>  
             <div ng-controller="ChildCtrl"></div>   <!--子级-->  
         </div>  
         <div ng-controller="BroCtrl"></div>         <!--平级-->  
     </div>  
   
     <script type="text/javascript" charset="utf-8">  
         var app = angular.module("ngApp", []);  
         app.controller('SelfCtrl', function($scope) {  
             $scope.click = function () {  
                 $scope.$broadcast('to-child', 'child');  
                 $scope.$emit('to-parent', 'parent');  
             }  
         });  
         app.controller('ParentCtrl', function($scope) {  
             $scope.$on('to-parent', function(event,data) {  
                 console.log('ParentCtrl', data);       //父级能得到值  
             });  
             $scope.$on('to-child', function(event,data) {  
                 console.log('ParentCtrl', data);       //子级得不到值  
             });  
         });  
       
         app.controller('ChildCtrl', function($scope){  
             $scope.$on('to-child', function(event,data) {  
                 console.log('ChildCtrl', data);      //子级能得到值  
             });  
             $scope.$on('to-parent', function(event,data) {  
                 console.log('ChildCtrl', data);      //父级得不到值  
             });  
         });  
       
         app.controller('BroCtrl', function($scope){    
             $scope.$on('to-parent', function(event,data) {    
                 console.log('BroCtrl', data);         //平级得不到值    
             });    
             $scope.$on('to-child', function(event,data) {    
                 console.log('BroCtrl', data);         //平级得不到值    
             });    
         });  
         //angular.bootstrap(document.documentElement);  
     </script>  
 </body>  
 </html>  