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 相关文章推荐
JS远程获取网页源代码实例
Sep 05 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
javascript面向对象程序设计(一)
Jan 29 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
Feb 02 Javascript
JS实现两周内自动登录功能
Mar 23 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
详解从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实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
浅谈php中的循环while、do...while、for、foreach四种循环
2016/11/05 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
原生php实现excel文件读写的方法分析
2018/04/25 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
laravel 修改.htaccess文件 重定向public的解决方法
2019/10/12 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
JS设置获取cookies的方法
2014/01/26 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
2014/10/30 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
关于JavaScript中forEach和each用法浅析
2017/07/27 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python找出最小的K个数实例代码
2018/01/04 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
jupyter notebook 重装教程
2020/04/16 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
python如何提升爬虫效率
2020/09/27 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
MySQL面试题目集锦
2016/04/14 面试题
个人求职信范文分享
2013/12/13 职场文书
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
个人整改方案范文
2014/10/25 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
商业计划书范文
2019/04/24 职场文书
golang的文件创建及读写操作
2022/04/14 Golang