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

<script src="/UploadFiles/2021-04-02/angular.js">

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



emit译为发射，即下级传递上级。 


示例代码：


<script src="/UploadFiles/2021-04-02/angular.js">

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



上述作用域均存在层级关系，如果对于同级的作用域该如何做呢？
我们可以使用服务来广播事件：


<script src="/UploadFiles/2021-04-02/angular.js">

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



以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：详解Angular路由 ng-route和ui-router的区别

            下一篇：jQuery表单验证之密码确认