Angular中$broadcast和$emit的使用方法

梦里梦外; 2021-10-19 10:24 412阅读 0赞

要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。

**broadcast译为广播，即上级传递下级。  
示例代码：**

<script src="../angular.js"></script>
    <script>
    angular.module("app", [])
        .controller("child", function($scope) {
            $scope.$on("parentChange", function(e, m) {
                $scope.change = "changed";
                $scope.child = m;
            })
        })
        .controller("parent", function($scope) {
            $scope.$watch("parent", function(n, o) {
                if (n == o) {
                    return;
                }
                $scope.$broadcast("parentChange", n)
            })
        })
    </script>
    
    <body>
        <div ng-controller="parent">
            Parent: {
       {parent}}
            <input type="text" ng-model="parent">
    
            <div ng-controller="child">
                {
       {change}} Child: {
       {child}}
            </div>
        </div>
    </body>

上述代码使用$watch监听parent的值的变化，当发生变化时就会“广播”出parentChange事件并传递了参数（输入框的值），此时子元素作用域中使用了$scope.$on("parentChange, handler)" 来接收parentChange事件，然后接受输入框的值并赋值给子作用域中的child变量。 这样就完成了值的传递。

**emit译为发射，即下级传递上级。  
示例代码：**

<script src="../angular.js"></script>
    <script>
    angular.module("app", [])
        .controller("parent", function($scope) {
            $scope.$on("childChange", function(e, m) {
                $scope.change = "changed";
                $scope.parent = m
            })
        })
        .controller("child", function($scope) {
            $scope.$watch("child", function(n, o) {
                if (n == o) {
                    return;
                }
                $scope.$emit("childChange", n)
            })
        })
    </script>
    
    
    <body ng-controller="parent">
        {
       {change}} Parent: {
       {parent}}
        <div ng-controller="child">
            Child: {
       {child}}
            <input type="text" ng-model="child">
        </div>
    </body>

当子元素的child值发生变化时，会向上级发出childChange事件，此时父元素正在监听的$on(“childChange”)会做出响应，将传递的参数赋值给parent，整个流程与 broadcast类似。

上述作用域均存在层级关系，如果对于同级的作用域该如何做呢？

我们可以使用服务来广播事件：

<script src="../angular.js"></script>
    <script>
    angular.module("app", [])
        .service("myServive", function($rootScope) {
            return {
                change: function(n) {
                    $rootScope.$broadcast("valueChange", n);
    
                }
            }
        })
        .controller("bro1", function($scope, myServive) {
            $scope.$watch("value1", function(n) {
                myServive.change(n);
            })
    
            $scope.$on("valueChange", function(e, m) {
                console.log("value1");
                $scope.value1 = m;
            })
        })
        .controller("bro2", function($scope, myServive) {
            $scope.$watch("value2", function(n) {
                myServive.change(n);
            })
    
            $scope.$on("valueChange", function(e, m) {
                console.log("value2");
                $scope.value2 = m;
            })
        })
    </script>
    
    
    <body>
        <div ng-controller="bro1">
            <h3> value1:</h3>
            <input type="text" ng-model="value1">
        </div>
        <div ng-controller="bro2">
            <h3>value2:</h3>
            <input type="text" ng-model="value2">
        </div>
    </body>

我们在服务中运用了$rootScope，所有的作用域都从属于它，基于这点，我们可以在根作用域中广播事件，$rootScope.$broadcast("valueChange", n);，当每个子作用域中的值发生变化时我们都会调用服务中的change 方法来广播这个事件，同时每个作用域又都在监听$on("valueChange") 事件并作出相应处理，这样就实现了子作用域中的值会传递给兄弟作用域了。

更多参考：  
http://brandonclapp.com/using-angularjs-services-to-broadcast-messages-between-controllers/  
http://www.codelord.net/2015/05/04/angularjs-notifying-about-changes-from-services-to-controllers/

转自 ：https://blog.csdn.net/u014291497/article/details/52268408

发表评论取消回复

表情：

评论列表（有 0 条评论，412人围观）

还没有评论，来说两句吧...

相关阅读

相关 angularjs - on、on、emit和$broadcast的使用与区别

angularjs - o n 、 on、 on、emit和$broadcast的使用与区别 AngularJS中的作用域有一个非常有层次和嵌套分明的结构。其中它

r囧r小猫/ 2024年03月23日 12:52/ 0 赞/ 66 阅读

相关 Vue.js 中的 $emit 和 $on 方法有什么区别？

Vue.js 中的 $emit 和 $on 方法有什么区别？在 Vue.js 中，$emit 和 $on 方法是两个常用的方法，用于实现组件间的通信。它们可以让我们在一

绝地灬酷狼/ 2024年03月16日 16:26/ 0 赞/ 62 阅读

相关 Angular共享模块的使用方法

在Angular使用过程中，如果我们创建完主要的功能模块后，发现功能模块中其实会有很多功能一样的小组件，或者存在一些需要额外实现的功能组件，此时我们可以创建一个共享的模块，这个

桃扇骨/ 2023年02月24日 08:18/ 0 赞/ 6 阅读

相关 AngularJs $broadcast $emit $on 事件触发controller间的值传递

使用angularjs，发现controller间的值传递，比较麻烦的，以后几篇文章会陆续说几种方法。一，angularjs $broadcast $emit $o

た入场券/ 2022年08月13日 13:54/ 0 赞/ 178 阅读

相关 angularJS系列之Controller传值-$on、$emit、$broadcast

Controller之间传值方法 1. 通过value、constant、$rootscope等全局变量传值，只读 2. 通过provider传值，可读可写。应用可参

电玩女神/ 2022年07月20日 15:15/ 0 赞/ 220 阅读

相关 vuejs 的watch 和 $emit

vue有很多像watch，prop，emit等这种api，自己看官网现在给出两个简单的例子： watch 有两种，一种是深度监听，一种是浅度监听 watch

悠悠/ 2022年06月12日 14:43/ 0 赞/ 505 阅读

相关 Angular中$broadcast和$emit的使用方法

要在控制器之间传递变量变化需要使用angular中的$broadcast和$emit方法来传递，同时使用$on来接收事件并作出响应。 broadcast译为广播，即上级传递下

梦里梦外;/ 2021年10月19日 10:24/ 0 赞/ 413 阅读

相关 props和$emit

props 父组件向子组件传值，子组件调用 $emit 子组件调用父组件中定义的方法 > 父组件 <template>

╰+哭是因爲堅強的太久メ/ 2021年10月01日 09:18/ 0 赞/ 361 阅读

相关 uniapp中的组件通讯（$emit和$on）

效果图： ![20210307003902909.gif][] 实现代码： ![20210307003920802.png][] bus.js imp

川长思鸟来/ 2021年07月25日 15:29/ 0 赞/ 1466 阅读

相关 AngularJs 消息机制($emit、$broadcast、$on)

1、发送消息必须配合事件如(ng-click)在回调函数中使用 2、$scope.$emit('名称',数据) 向自身以及父controller发送消息

蔚落/ 2021年07月25日 01:49/ 0 赞/ 563 阅读