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与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
c#程序员对TypeScript的认识过程
Jun 19 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
关于react-router的几种配置方式详解
Jul 24 Javascript
vue计算属性及使用详解
Apr 02 Javascript
Vue如何实现响应式系统
Jul 11 Javascript
javascript中toFixed()四舍五入使用方法详解
Sep 28 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中文分词 自动获取关键词介绍
2012/11/13 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
高效的jQuery代码编写技巧总结
2017/02/22 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Node之简单的前后端交互(实例讲解)
2017/11/14 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
[00:12]2018DOTA2亚洲邀请赛SOLO赛 MidOne是否中单第一人?
2018/04/05 DOTA
linux系统使用python监控apache服务器进程脚本分享
2014/01/15 Python
Python中无限元素列表的实现方法
2014/08/18 Python
Python素数检测实例分析
2015/06/15 Python
5款非常棒的Python工具
2018/01/05 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
pandas的相关系数与协方差实例
2019/12/27 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
关于python中remove的一些坑小结
2021/01/04 Python
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
绝对经典成功的大学生推荐信
2013/11/08 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
医学专业职业生涯规划范文
2014/02/05 职场文书
创意广告词
2014/03/17 职场文书
创意婚礼策划方案
2014/05/18 职场文书
校长新学期致辞
2015/07/30 职场文书
大学生社会实践感想
2015/08/11 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题