返回首页
当前位置: 主页 > 编程语言 > C#教程 >

Angularjs 中控制器之间的通信

时间:2016-10-28 22:10来源:电脑教程学习网 www.etwiki.cn 编辑:admin

  在Angularjs应用程序中,一个页面通常被划分为很多个区域,每个区域对应一个控制器,同级控制器之间互不干扰。有时候我们希望一个控制器中的内容改变的同时其他的控制器也作出响应,这时就要在控制器之间进行通信了。

一.利用作用域的继承方式

由于Angularjs中作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。

图1
如图1是HTML页面的部分内容,Child控制器会继承Father控制器的值。当继承的值为基本类型时(图2),点击第一个“更改地区”,两个绑定的location的值都变成了“深圳”,点击第二个“更改地区”时,第一个location的值不变,第二个变成了“广州”。如果想要两个location的值都改变,可以把location装到一个对象里,如图3。对应HTML内容把绑定的内容改成 obj.location。

图2

图3

二.基于事件的方式

在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式。基于事件的方式中我们可以利用Angularjs定义好的$on,$emit,$boardcast这几个事件处理函数来实现,其中$on表示事件监听,$emit表示向父级以上的作用域传播事件, $boardcast表示向子级以下的作用域广播事件。如图4部分HTML页面:Father控制器作用域下有两个子控制器作用域Child1、Child2,对应的js如图5。

图4

图5
当点击任何一个“更改地区”的按钮时,对应的控制器会向父级以上控制器传播一个“changeLocation”事件,图5中的Father控制器刚好有监听该事件,当Father控制器监听到“changeLocation”事件时,它做出的响应是向子控制器广播一个事件“onChangeLocation”,图5中两个子控制器都监听了“onChangeLocation”事件,分别对事件做出响应。最后页面上第一个绑定的值显示“广州”,第二个显示“深圳”。这里要特别注意的是,通过父元素作为中介进行传递的话,广播的事件名不能和监听到的事件名相同。

三.基于服务的方式

在Angularjs中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中就可以获取到修改后的值。HTML及对应的JS如图6、图7。当在输入框中输入文字,点击“click me”时,页面上name的值变成了输入的文字。

图6

图7
顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):Angularjs
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐内容