angularjs controller之间的通信

在AngularJS中,使用$rootScope进行控制器间通信会导致全局污染问题。随着项目规模扩大,这个问题会愈发严重。为了解决这个问题,文章探讨了AngularJS的作用域继承机制,指出控制器可以通过作用域的原型链访问父级作用域,以此实现通信,从而避免对$rootScope的过度依赖。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >



接触了angularjs有一段时间了,最近遇到一个问题,需要在controller之间进行通信,当初想了一下,并不是很难,angularjs不是有个rootscope吗,

于是我就在其中一个controller里面写了一个function,然后赋值给rootscope,然后在另一个controller里面进行直接调用rootscope的这个方法,

虽然可以实现基本的功能,但是 有一个很严重的问题,那就是全局污染,写一个小的东西用rootscope当然是不会有多重的全局污染的,但是,一旦系统稍微大一点,那么全局污染的就会非常严重。

然后我抛弃了这种用rootscope的方式,查看了一些angularjs的书籍,网上查阅了一下。得出这样的结论

1.作用域的继承关系

因为作用域都是通过原型继承而来的,也就是说他们都可以访问父级作用域。了解js原型机制的应该都知道,在当前作用域中查找某个属性,找不到然后去他的原型找,也就是说在他的父级中查找,angularjs一样在当前scope中找不到便会在父级的scope中找,找不到最后在rootscope中找。

举个例子:

app.controller('parentCtrl',function($scope){
$scope.person={greeted:false};
});

app.controller('childCtrl',function($scope){
$scope.sayHello=function(){
$scope.person.name="ddd";
}
});
<pre name="code" class="html"><div ng-controller='parentCtrl'>
   <div ng-controller='childCtrl'>
       <a ng-click='sayHello()'>Say Hello</a>
</div>
</div>

上面这个html里面可以看到开始我们定义的两个控制器构成了一个层次结构,childCtrl的$scope的父级就是parent的$scope,根据原型机制,我们可以访问到parentCtrl
2.基于事件的方式
事件通信的方式有$emit和$broadcast两种,$emit是将事件和数据传给父作用域,$broadcast是将事件和数据传给子作用域,要想同级的controller通信也能搬到,只需要在其中一个子级中将事件和数据传递给父级,然后父级在广播给所有子级,所有这些都是用$on来监听
3.通过服务的方式通信
服务是一个单例对象,在每个应用中只会被$injector实例化一次,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有控制器中共享



看了这么多,最终还是自己懂得太少,书看得太少,加油

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值