对angularjs框架下controller间的传值方法详解


Posted in Javascript onOctober 08, 2018

AngularJS中的controller是个函数,用来向视图的作用域($scope)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。

当我们在创建新的控制器时,angularJS会帮我们生成并传递一个新的$scope对象给这个controller,在angularJS应用的中的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是$rootScope。

每个$scope的$root指向$rootScope, $cope.$parent指向父级作用域。

cotroller之间的通信本质上是当前的controller所在的$scope如何跟其他controller上的$scope进行通信。

通常有3中解决方式:

利用作用域继承的原理,子控制器访问父级控制器中的内容。 使用angularJS中的事件,也就是使用$on,$emit,$broadcast进行消息传递 使用angularJS中的服务

第一种方式

即作用域嵌套作用域,有一定的使用限制,需要作用域嵌套起来,在实际开发中这种场景相对比较少,但也不是没有,这种方式更简单直接。

angularJS中默认情况下,当前作用域中无法找到某个属性时,就会在父级作用域中进行查找,若找不到直至查找到$rootScope。 如果在$rootScope中也无法找到程序依旧运行,但视图不会更新。

示例

//Javascript
app.controller('ParentController', function($scope) { 
$scope.person = {greeted: false};
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.person.name = 'Ari Lerner';
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
{{ person }}
</div>
//result
{"greeted":true, "name": "Ari Lerner"}

第二种方式

因为作用域是有层次的,所以可以利用作用域链传递事件。

传递事件有2种方式: * $broadcast: 触发的事件要通知整个事件系统(允许任意作用域处理这个事件)就要向下传播。 * $emit: 如果要提醒一个全局模块,需要通知更高层次的作用域时(例如$rootscope)需要把事件向上传递。

作用域上使用$on进行事件监听。

示例

app.controller('ParentController', function($scope) { 
$scope.$on('$fromSubControllerClick', function(e,data){
console.log(data); // hello
});
});
app.controller('ChildController', function($scope) {
$scope.sayHello = function() {
$scope.$emit('$fromSubControllerClick','hello');
};
});
//HTML
<div ng-controller="ParentController">
<div ng-controller="ChildController">
<a ng-click="sayHello()">Say hello</a>
</div>
</div>

在这里想要说的另外一个问题就是事件传播的性能问题,$broadcast+$on的方式回通知所有的子作用域,这里就会有性能问题,所以推荐使用$emit+$on的方式,为了进一步提升性能,定义的事件处理函数要在作用域销毁时一起释放掉。

使用$emit+$on的方式需要我们将事件监听绑定在$rootScope上,例如:

angular
.module('MyApp')
.controller('MyController', ['$scope', '$rootScope', function MyController($scope, $rootScope) {
var unbind = $rootScope.$on('someComponent.someCrazyEvent', function(){
console.log('foo');
});
$scope.$on('$destroy', unbind);
}
]);

但是这种方式有点繁琐,定义多个事件处理函数时整个人都不好了,所以我们来改进一下

利用装饰器来定义一个新的事件绑定函数:

angular
.module('MyApp')
.config(['$provide', function($provide){
$provide.decorator('$rootScope', ['$delegate', function($delegate){
Object.defineProperty($delegate.constructor.prototype, '$onRootScope', {
value: function(name, listener){
var unsubscribe = $delegate.$on(name, listener);
this.$on('$destroy', unsubscribe);
return unsubscribe;
},
enumerable: false
});
return $delegate;
}]);
}]);

那么我们在控制器中定义事件处理函数时:

angular
.module('MyApp')
.controller('MyController', ['$scope', function MyController($scope) {
$scope.$onRootScope('someComponent.someCrazyEvent', function(){
console.log('foo');
});
}
]);

个人强烈推荐此种做法

第三种方式

利用angularJS中service单例模式的特性,服务(service)提供了一种能在应用的整个生命周期内保持数据的方式,能够在控制器之间进行通信,且能保证数据的一致性。

一般我们都会封装server来为应用提供访问数据的接口,或者跟远程进行数据交互。

示例

var myApp = angular.module("myApp", []);
myApp.factory('Data', function() {
return {
name: "Ting"
}
});
myApp.controller('FirstCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Jack";
}
});
myApp.controller('SecondCtrl', function($scope, Data) {
$scope.data = Data;
$scope.setName = function() {
Data.name = "Moby";
}
});

再用简单的方法总结一下

1、父controller,负责监听并广播

//监听:若收到change,把值广播出去
$scope.$on(“change",function (event, msg) {
 $scope.$broadcast(“changeFromBody", msg);
});

2、子controller,负责把变量发给父controller

//向父controller传值$scope.value
 $scope.$emit(“change", $scope.value);

3、子controller,负责监听父controller的广播,给变量赋新值

//监听父controller的广播,得到changeFromBody广播时取$scope.value
$scope.$on(“changeFromBody",function (event, msg) {
 $scope.value = msg;
});

以上这篇对angularjs框架下controller间的传值方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用javascript过滤html的字符串(注释标记法)
Jul 08 Javascript
node.js入门教程
Jun 01 Javascript
Javascript模块化编程详解
Dec 01 Javascript
javascript操作表格排序实例分析
May 06 Javascript
vue自定义指令实现v-tap插件
Nov 03 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
Vue 2.0 服务端渲染入门介绍
Mar 29 Javascript
微信小程序 支付后台java实现实例
May 09 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
如何在 ant 的table中实现图片的渲染操作
Oct 28 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 #Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 #Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
Oct 08 #Javascript
angularJs复选框checkbox选中进行ng-show显示隐藏的方法
Oct 08 #Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 #jQuery
angularJs select绑定的model取不到值的解决方法
Oct 08 #Javascript
基于AngularJs select绑定数字类型的问题
Oct 08 #Javascript
You might like
php外部执行命令函数用法小结
2016/10/11 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JS获取当前网址、主机地址项目根路径
2013/11/19 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
跟我学习javascript的undefined与null
2015/11/17 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
[00:17]天涯墨客一技能展示
2018/08/25 DOTA
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
python实现log日志的示例代码
2018/04/28 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
python画图系列之个性化显示x轴区段文字的实例
2018/12/13 Python
python 用下标截取字符串的实例
2018/12/25 Python
利用HTML5的新特点实现图片文件异步上传
2014/05/29 HTML / CSS
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
汉森批发:Hansen Wholesale
2018/05/24 全球购物
介绍一下Ruby的多线程处理
2013/02/01 面试题
工程项目经理岗位职责
2013/12/15 职场文书
县级文明单位申报材料
2014/05/23 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书