angularjs controller之间的通信

最新推荐文章于 2020-07-14 03:00:55 发布

原创最新推荐文章于 2020-07-14 03:00:55 发布 · 3.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#web开发 #angularjs #通信 #继承 #对象

在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实例化一次，所以在服务中生成一个对象，该对象就可以利用依赖注入的方式在所有控制器中共享

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