AngularJS 事件广播与接收 $emit $broadcast $on

AngularJS中的作用域scope有一个非常有层次和嵌套分明的结构。

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

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

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

$on、$emit和$broadcast使得event、data在controller之间的传递变的简单。

发送消息： $scope.$emit(name, data) 或者 $scope.$broadcast(name, data);

区别：

$emit只能向parent controller广播event与data
$broadcast只能向child controller广播event与data

接收消息： $scope.on(name,function(event,data){ });

$on 有两个参数function(event,msg) 第一个参数是事件对象，第二个参数是接收到消息信息

例子如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body ng-app="myApp">

        <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>

            var app = angular.module('myApp', []);

            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); //父级能得到值 ParentCtrl parent

                });

                $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); //子级能得到值 ChildCtrl child

                });

                $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); //平级得不到值

                });

            });

        </script>

    </body>

</html>

巴特西

AngularJS 事件广播与接收 $emit $broadcast $on

最新文章

热门文章