您的位置：首页 > Web前端 > AngularJS

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

2016-12-14 19:14 417 查看


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

博客分类： 

AngularJSjavaScriptangularJS

        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>  

        运行结果：



        $emit和$broadcast可以传多个参数，$on也可以接收多个参数。在$on的方法中的event事件参数，其对象的属性和方法如下：



        感觉广播比service在不同controller中通信要方便许多，但在实际的项目开发过程中，为了代码维护性，最好还是少用。
http://bijian1013.iteye.com/blog/2171299
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航