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


Posted in Javascript onMay 22, 2017

要在控制器之间传递变量变化需要使用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变量。 这样就完成了值的传递。

效果:

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

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类似。

效果:

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

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

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

<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") 事件并作出相应处理,这样就实现了子作用域中的值会传递给兄弟作用域了。

效果为:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
javascript数组的扩展实现代码集合
Jun 01 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
Aug 29 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
JSONP和批量操作功能的实现方法
Aug 21 Javascript
Require.js的基本用法详解
Jul 03 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
May 22 #Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 #Javascript
JS实现上传图片实时预览功能
May 22 #Javascript
详解Angular 4.x NgIf 的用法
May 22 #Javascript
JS实现无缝循环marquee滚动效果
May 22 #Javascript
jQuery表单验证之密码确认
May 22 #jQuery
JavaScript实现QQ聊天消息展示和评论提交功能
May 22 #Javascript
You might like
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP数组游标实现对数组的各种操作详解
2016/01/26 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php进程daemon化的正确实现方法
2018/09/06 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
VUE重点问题总结
2018/03/19 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
[45:34]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.18
2020/12/19 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
Python递归遍历列表及输出的实现方法
2015/05/19 Python
Python使用filetype精确判断文件类型
2017/07/02 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
市场部专员岗位职责
2013/11/30 职场文书
大学军训感言
2014/01/10 职场文书
志愿者活动总结范文
2014/04/26 职场文书
《桃林那间小木屋》教学反思
2014/05/01 职场文书
法律系毕业生求职信
2014/05/28 职场文书
理财计划书
2014/08/14 职场文书
一般党员对照检查材料
2014/09/24 职场文书
2014年路政工作总结
2014/12/10 职场文书
司机个人年终总结
2015/03/03 职场文书
实习班主任自我评价
2015/03/11 职场文书
python实现剪贴板的操作
2021/07/01 Python
Linux中如何安装并部署Redis
2022/04/18 Servers