Angularjs Controller 间通信机制

最新推荐文章于 2025-09-05 10:02:17 发布

转载最新推荐文章于 2025-09-05 10:02:17 发布 · 64 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/1995hxt/p/5116591.html

文章标签：

#javascript #ViewUI

本文详细介绍了AngularJS开发中控制器间通信的机制，包括冒泡和隧道机制的应用，通过示例展示了如何使用AngularJS解决控制器之间的通信问题。

Angularjs Controller 间通信机制

转自：http://www.cnblogs.com/whitewolf/archive/2013/04/16/3024843.html

在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller，避免过大无所不能的上帝controller，我们把controller分离开了，但是有时候我们需要在controller中通信，一般为比较简单的通信机制，告诉同伴controller我的某个你所关心的东西改变了，怎么办？如果你是一个javascript程序员你会很自然的想到异步回调响应式通信—事件机制(或消息机制)。对，这就是angularjs解决controller之间通信的机制，所推荐的唯一方式，简而言之这就是angular way。

Angularjs为在scope中为我们提供了冒泡和隧道机制，$broadcast会把事件广播给所有子controller，而$emit则会将事件冒泡传递给父controller，$on则是angularjs的事件注册函数，有了这一些我们就能很快的以angularjs的方式去解决 angularjs controller之间的通信，代码如下：

View:

1 <div ng-app="app" ng-controller="parentCtr"> 2 <div ng-controller="childCtr1">name : 3 <input ng-model="name" type="text" ng-change="change(name);" /> 4 </div> 5 <div ng-controller="childCtr2">Ctr1 name: 6 <input ng-model="ctr1Name" /> 7 </div> 8 </div>

Controller:

 1 angular.module("app", []).controller("parentCtr",
 2 function ($scope) {
 3 $scope.$on("Ctr1NameChange",  4  5 function (event, msg) {  6 console.log("parent", msg);  7 $scope.$broadcast("Ctr1NameChangeFromParrent", msg);  8  });  9 }).controller("childCtr1", function ($scope) { 10 $scope.change = function (name) { 11 console.log("childCtr1", name); 12 $scope.$emit("Ctr1NameChange", name); 13  }; 14 }).controller("childCtr2", function ($scope) { 15 $scope.$on("Ctr1NameChangeFromParrent", 16 17 function (event, msg) { 18 console.log("childCtr2", msg); 19 $scope.ctr1Name = msg; 20  }); 21 });