AngularJS开发教程之控制器之间的通信方法分析
本文实例讲述了AngularJS开发教程之控制器之间的通信方法。分享给大家供大家参考,具体如下:
一、指令与控制器之间通信,无非是以下几种方法:
cope继承的方式
二、基于scope继承的方式:
最简单的让控制器之间进行通信的方法是通过scope的继承。假设有两个控制器Parent、Child,Child 在 Parent 内,那Child 可以称为控制器Parent的子控制器,它将继承父控制器Parent的scope。这样,Child就可以访问到Parent的scope中的所有函数和变量了。
需要注意的是,由于scope的继承是基于Js的原型继承,如果变量是基本类型的,那在Child中的修改(写),有可能会导致Parent中的数据变脏。
例子:
三、基于事件的方式:
在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式 。基于事件的方式中我们可以里面作用的on,on,emit,boardcast这几个方式来实现,其中boardcast这几个方式来实现,其中on表示事件监听,emit表示向父级以上的作用域触发事件,emit表示向父级以上的作用域触发事件,boardcast表示向子级以下的作用域广播事件。
子到父 通过 $emit 注册事件,例子:
rush:js;">
<
Meta charset="UTF-8">
基于事件传播子到父
$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件
,例子:
基于事件传播父到子
$on,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件
基于事件传播父到子,这里本事父就可以到子,感觉有点多余
同级之间
拥有同个父scope的子级scope之间,也就是兄弟/相邻scope之间的通信,其实是借助共同父级传递消息的:
子级scope中有谁想传消息了,emit一个给“奶爸”然后通过“奶爸”emit一个给“奶爸”然后通过“奶爸”broadcast 给所有孩子这个相同的信息,当然发出信息的那个可以选择是否要忽略掉自己发出的信息
四、angular服务的方式:
在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:
rush:js;">
var app = angular.module('myApp',[]);
app.factory('instance',function(){
return {};
});
app.controller('MainCtrl',function($s
cope,instance) {
$s
cope.change = function() {
instance.name = $s
cope.test;
};
});
app.controller('sideCtrl',instance) {
$s
cope.add = function() {
$s
cope.name = instance.name;
};
});
html:
更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》及《》
希望本文所述对大家AngularJS程序设计有所帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。