Angularjs controller之间的通信

刚刚看了网上的一些关于控制器之间的通信；然后结合自己项目做了一些，这里主要做的是二个同级之间的controller通信。

Html：

 1 <html>
 2 <script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
 3 <body>
 4 <div ng-app="app">
 5      <div ng-controller="childCtr1">name :
 6         <input ng-model="name" type="text"  />
 7     </div>
 8      <div ng-controller="childCtr2">Ctr1 name:
 9          {{ctr1Name}}
10      </div>
11  </div>
12 </body>
13 </html>

上面的html代码设置了2个同级的控制器，现在childCtr2需要childCtr1的参数来显示相关信息，下面是控制器childCtr1的代码：

1 angular.module("app", [])
2 .controller("childCtr1", function ($scope) {
3     $scope.$watch("name",function (){//监听绑定“name"，当发生改变时发送消息；
4         //alert("123");
5         $scope.$emit("Ctr1NameChange", $scope.name);//发送名为Ctr1NameChange的消息，值为$scope.name
6     });
7 });

下面是childCtr2的代码：

angular.module("app", [])
.controller("childCtr2", function ($scope) {$scope.$on("Ctr1NameChange",//监听有没有名为”Ctr1NameChange“的消息，如果有，则执行下面函数function (event, msg) {console.log("childCtr2", msg);$scope.ctr1Name = msg;});
});

以上是针对控制器分离的文件写的不同形式；当然也可以将他们合并到一个页面

 1 angular.module("app", [])
 2 .controller("childCtr1", function ($scope) {
 3     $scope.$watch("name",function (){
 4         //alert("123");
 5         $scope.$emit("Ctr1NameChange", $scope.name);
 6     });
 7 }).controller("childCtr2", function ($scope) {
 8     $scope.$on("Ctr1NameChange",
 9
10     function (event, msg) {
11         console.log("childCtr2", msg);
12         $scope.ctr1Name = msg;
13     });
14 });

还有很多控制器之间的通信方法，包括server的factory，可以参考：http://jsbin.com/hopazo/5/edit?html,css,js,output

转载于:https://www.cnblogs.com/tiedaweishao/p/4798651.html

Angularjs controller之间的通信相关推荐

AngularJS实战之Controller之间的通信
我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式一.使用$on.$emit和$broadcast进行controller通信虽然AngularJ ...
angularJS中directive与controller之间的通信
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...
Angularjs Controller 间通信机制
在Angularjs开发一些经验总结随笔中提到我们需要按照业务却分angular controller,避免过大无所不能的上帝controller,我们把controller分离开了,但是有时候我们需 ...
angularJS的controller之间如何正确的通信
AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在创建新的控制器时,angularJ ...
angularjs控制器之间的数据共享与通信
1.可以写一个service服务,从而达到数据和代码的共享; var app=angular.module('app',[]);app.service('ObjectService', [Object ...
多个 ng-app 中 Controllers Services 之间的通信
原文发布在个人独立博客上,链接:http://pengisgood.github.io/2016/01/31/communication-between-multiple-angular-apps/ ...
在AngularJS控制器之间共享数据
本文翻译自:Share data between AngularJS controllers I'm trying to share data across controllers. 我正在尝试跨控制 ...
vue的父子组建之间的通信(-)，基于props和$emit之间的传递
对于vue而言,以为其核心思想为前端组建化.所以组建之间的通信必不可少. 相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制. 1:父传子:官方的$broadcast() ...
如何解决服务之间的通信问题？
文章目录 1.如何解决服务之间的通信问题? 2.如何在java代码中发起http方式请求? 3.实现服务间通信的小案例 3.1 使用两个测试服务用户服务users和订单服务orders 3.2 用户 ...

Angularjs controller之间的通信

Angularjs controller之间的通信相关推荐

最新文章

热门文章