当前位置:首页 > 日记 > 正文

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

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

要在控制器之间传递变量变化需要使用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") 事件并作出相应处理,这样就实现了子作用域中的值会传递给兄弟作用域了。

效果为:

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

相关文章

AngularJs 延时器、计时器实例代码

AngularJs 延时器、计时器实例代码

实例代码,计时器,延时器,电脑软件,AngularJs,1.$timeout延时器apptest.controller("main",function($scope,$timeout){ $scope.pink="pink"; $scope.box="第二个盒子"; $timeout(function(){ $scope.pink="第一个盒子内容,延迟…

简单谈谈require模块化jquery和ang

简单谈谈require模块化jquery和ang

模块化,简单,电脑软件,require,jquery,require 模块化开发问题,正常自己写的模块 是exports 导出一个模块//模块化引入jquery 不同和问题require 引入jquery swiper .... 插件和库的时候需要require.config({  baseUrl:"js/libs", //文…

excel表格如何变成白色背景

excel表格如何变成白色背景

方法,设置,表格,背景,白色,  如何设置EXCEL表格中的表格背景呢?常用Excel的朋友看腻了白色背景想跟换怎么吧?接下来小编举例简单的例子告诉大家Excel表格设置背景的方法吧。Excel表格设置背景的方法首先打开excel表格,做一个简单表格。Exc…

浅谈pc端rem字体设置的问题

浅谈pc端rem字体设置的问题

字体设置,浅谈,电脑软件,rem,pc,1、内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常2、长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置…

JavaScript全屏和退出全屏事件总结

JavaScript全屏和退出全屏事件总结

全屏,事件,退出,代码,电脑软件,代码如下:window.isflsgrn = false;//ie11以下是否进入全屏标志,true为全屏状态,false为非全屏状态 window.ieIsfSceen = false;//ie11是否进入全屏标志,true为全屏状态,false为非全屏状态 //跨浏览器返…

AI简单制作复古煤油灯插画教程

AI简单制作复古煤油灯插画教程

教程,煤油灯,插画,简单,电脑软件,效果图:主要过程:教程结束,以上就是AI简单制作复古煤油灯插画教程的全部内容,希望大家喜欢!相关教程推荐:AI结合PS打造一个复古漂亮的马油灯图标Illustrator鼠绘有钨丝的矢量白炽灯泡ai怎么制作霓虹灯效果的文字?…

excel2017如何制作折线图excel如何

excel2017如何制作折线图excel如何

折线图,教程,步骤,曲线图,电脑软件,  一般我们使用excel就是使用类表格的形式存储数据使用,你可知道excel也可以使用图表的形式存储数据,下面让小编为你带来excel2017如何制作折线图的方法。excel2017折线图制作步骤01打开需要修改Excel文…

javascript九宫格随机打乱位置的实

javascript九宫格随机打乱位置的实

九宫格,方法,位置,电脑软件,javascript,今天就做个九宫格的简易拼图,最让我头疼的就是点击开始打乱图片位置。一开始在百度查看相关博客,走了很多弯路。最后看了众多的例子,自己写了个方法。<script>//打乱图片方法 function fun(){ var x …

Javascript实现页面滚动时导航智能

Javascript实现页面滚动时导航智能

智能,定位,导航,页面,电脑软件,常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。假设结构如下:<div class="container"> <…

ES6扩展运算符的用途实例详解

ES6扩展运算符的用途实例详解

扩展,运算符,详解,实例,用途,ES6的扩展运算符可以说是非常使用的,在给多参数函数传参,替代Apply,合并数组,和解构配合进行赋值方面提供了很好的便利性。扩展运算符就是三个点“...”,就是将实现了Iterator 接口的对象中的每个元素都一个个的迭代…

excel2010图表制作滚动条控件的方

excel2010图表制作滚动条控件的方

图表,滚动条,方法,控件,电脑软件,  在Excel中制作好图表之后经常需要用到滚动条控件,具体该如何制作滚动条控件呢?下面是由小编分享的excel2010图表制作滚动条控件的方法,以供大家阅读和学习。excel2010图表制作滚动条控件的方法图表制作滚…

详解微信小程序 登录获取unionid

详解微信小程序 登录获取unionid

登录,详解,程序,电脑软件,微信小,详解微信小程序 登录获取unionid首先公司开发了小程序, 公众号网页和app等, 之前都是用的openid来区分用户, 但openid只能标识用户在当前小程序或公众号里唯一, 我们希望用户可以在公司各个产品(比如公众号…