AngularJS控制器controller之间通信
2015-11-02 23:08
633 查看
关于控制器如何通信的问题,总的来说,angular控制器通信的方式有三种:
1、利用作用域继承的方式。即子控制器继承父控制器中的内容;
2、基于事件的方式。即$on,$emit,$boardcast这三种方式;
3、angular服务的方式。写一个服务的单例然后通过注入来使用。
由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况:
当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值。
//
js
// html
如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。
// js
// html
// js
// html
[b]// js[/b]
// html
从(1),(2)的用法我们可以引申出一种用于兄弟控制器间进行通信的方法。首先一个兄弟控制器中向父作用域触发一个事件,然后在父作用域中监听事件,再广播给子作用域,这样通过事件携带的参数,实现了数据经过父作用域,在兄弟作用域之间传播。注意:通过父元素作为中介进行传递的话,兄弟元素用的事件名不能一样,否则会进入死循环。
[b]// js[/b]
// html
在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。
[b]// js[/b]
// html
1、利用作用域继承的方式。即子控制器继承父控制器中的内容;
2、基于事件的方式。即$on,$emit,$boardcast这三种方式;
3、angular服务的方式。写一个服务的单例然后通过注入来使用。
一、利用作用域的继承方式
由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况:
(1)基本类型
当作用域上面的值为基本类型的时候,修改父作用域上面的值会影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值。//
js
var AppModule = angular.module("AppModule", []); AppModule.controller("parentCtrl", ["$scope", function ($scope) { $scope.param = "parentParam1"; $scope.changeParentParam = function(){ $scope.param = "parentParam2"; }; }]); AppModule.controller("childCtrl", ["$scope", function ($scope) { $scope.changeChildParam = function(){ $scope.param = "childParam2"; }; }]);
// html
<div ng-controller="parentCtrl"> <h3>1.利用作用域继承的方式--基本类型</h3> <p>parentCtrl的param:{{param}}</p> <button ng-click="changeParentParam()">改变parentCtrl的param值</button> <div ng-controller="childCtrl"> <p>childCtrl的param:{{param}}</p> <button ng-click="changeChildParam()">改变childCtrl的param值</button> </div> </div>
(2)对象
如果需要父作用域与子作用域共享一个值的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。// js
var AppModule = angular.module("AppModule", []); AppModule.controller("parentCtrl", ["$scope", function ($scope) { $scope.param = {val: "parentParam1"}; $scope.changeParentParam = function(){ $scope.param.val = "parentParam2"; }; }]); AppModule.controller("childCtrl", ["$scope", function ($scope) { $scope.changeChildParam = function(){ $scope.param.val = "childParam2"; }; }]);
// html
<div ng-controller="parentCtrl"> <h3>1.利用作用域继承的方式--对象</h3> <p>parentCtrl的param.val:{{param.val}}</p> <button ng-click="changeParentParam()">改变parentCtrl的param.val值</button> <div ng-controller="childCtrl"> <p>childCtrl的param.val:{{param.val}}</p> <button ng-click="changeChildParam()">改变childCtrl的param.val值</button> </div> </div>
二、基于事件的方式
在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式。基于事件的方式中我们可以用$on、$emit、$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的作用域触发事件, $broadcast表示向子级以下的作用域广播事件。
(1)向上传播事件$emit
// jsvar AppModule = angular.module("AppModule", []); AppModule.controller("parentCtrl", ["$scope", function ($scope) { $scope.param = "parentParam"; $scope.$on("childToParent", function(e, newParam){ $scope.param = newParam; }); }]); AppModule.controller("childCtrl", ["$scope", function ($scope) { $scope.param = "childParam"; $scope.$on("childToParent", function(e, newParam){ $scope.param = newParam; }); }]); AppModule.controller("grandChildCtrl", ["$scope", function ($scope) { $scope.param = "grandChildParam"; $scope.upward = function() { $scope.$emit('childToParent', $scope.param); } }]);
// html
<div ng-controller="parentCtrl"> <p>parentCtrl的param:{{param}}</p> <div ng-controller="childCtrl"> <p>childCtrl的param:{{param}}</p> <div ng-controller="grandChildCtrl"> <p>grandChildCtrl的param:{{param}}</p> <button ng-click="upward()">向父级以上传播事件</button> </div> </div> </div>
(2)向下广播事件$broadcast
[b]// js[/b]var AppModule = angular.module("AppModule", []); AppModule.controller("parentCtrl", ["$scope", function ($scope) { $scope.param = "parentParam"; $scope.$on("parentToChild", function(e, newParam){ $scope.param = newParam; }); }]); AppModule.controller("childCtrl", ["$scope", function ($scope) { $scope.param = "childParam"; $scope.downward = function() { $scope.$broadcast("parentToChild", $scope.param); }; }]); AppModule.controller("grandChildCtrl", ["$scope", function ($scope) { $scope.param = "grandChildParam"; $scope.$on("parentToChild", function(e, newParam){ $scope.param = newParam; }); }]);
// html
<div ng-controller="parentCtrl"> <p>parentCtrl的param:{{param}}</p> <div ng-controller="childCtrl"> <p>childCtrl的param:{{param}}</p> <button ng-click="downward()">向子级以下传播事件</button> <div ng-controller="grandChildCtrl"> <p>grandChildCtrl的param:{{param}}</p> </div> </div> </div>
(3)兄弟之间广播事件
从(1),(2)的用法我们可以引申出一种用于兄弟控制器间进行通信的方法。首先一个兄弟控制器中向父作用域触发一个事件,然后在父作用域中监听事件,再广播给子作用域,这样通过事件携带的参数,实现了数据经过父作用域,在兄弟作用域之间传播。注意:通过父元素作为中介进行传递的话,兄弟元素用的事件名不能一样,否则会进入死循环。[b]// js[/b]
var AppModule = angular.module("AppModule", []); AppModule.controller("parentCtrl", ["$scope", function ($scope) { $scope.param = "parentParam"; $scope.$on("childToParent", function(e, newParam){ $scope.param = newParam; //向下传播 $scope.$broadcast("parentToChild", $scope.param); }); }]); AppModule.controller("childCtrl1", ["$scope", function ($scope) { $scope.param = "childParam"; $scope.levelWard = function() { //向上传播 $scope.$emit("childToParent", $scope.param); }; }]); AppModule.controller("childCtrl2", ["$scope", function ($scope) { $scope.param = "grandChildParam"; $scope.$on("parentToChild", function(e, newParam){ $scope.param = newParam; }); }]);
// html
<div ng-controller="parentCtrl"> <p>parentCtrl的param:{{param}}</p> <div ng-controller="childCtrl1"> <p>childCtrl1的param:{{param}}</p> <button ng-click="levelWard()">向兄弟控制器传播事件</button> </div> <div ng-controller="childCtrl2"> <p>childCtr2的param:{{param}}</p> </div> </div>
三、angular服务的方式
在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。[b]// js[/b]
var AppModule = angular.module("AppModule", []); AppModule.factory("appFactory", function(){ return { param: "appFactory" }; }); AppModule.controller("parentCtrl", ["$scope", "appFactory", function ($scope, appFactory) { $scope.param = appFactory.param; }]); AppModule.controller("childCtrl1", ["$scope", "appFactory", function ($scope, appFactory) { $scope.param = "childCtrl1Param"; $scope.setParam = function() { appFactory.param = $scope.param; }; }]); AppModule.controller("childCtrl2", ["$scope", "appFactory", function ($scope, appFactory) { $scope.param = "childCtrl2Param"; $scope.getParam = function() { $scope.param = appFactory.param; }; }]);
// html
<div ng-controller="parentCtrl"> <p>parentCtrl的param:{{param}}</p> <div ng-controller="childCtrl1"> <p>childCtrl1的param:{{param}}</p> <label> <input ng-model="param"/> </label> <button ng-click="setParam()">设置appFactory服务的param</button> </div> <div ng-controller="childCtrl2"> <p>childCtr2的param:{{param}}</p> <button ng-click="getParam()">获取appFactory服务的param</button> </div> </div>
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- IE8开发人员工具教程(二)
- 在flex中执行一个javascript方法的简单方式
- Flex结合JavaScript读取本地路径的方法
- PowerShell中执行Javascript的方法示例
- javascript asp教程第六课-- response方法
- javascript asp教程More About Recordsets