对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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
Javascript 两种刷新方法以及区别和适用范围
Jan 17 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
AngularJS实现表格的增删改查(仅限前端)
Jul 04 Javascript
通过命令行生成vue项目框架的方法
Jul 12 Javascript
vue 微信授权登录解决方案
Apr 10 Javascript
Less 安装及基本用法
May 05 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
May 12 Javascript
JS ES6异步解决方案
Apr 29 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入门教程 精简版
2009/12/13 PHP
深入理解PHP原理之异常机制
2010/08/21 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
javascript获取本机操作系统类型的方法
2015/08/13 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
2015/12/02 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
jquery滚动条插件(可以自定义)
2016/12/11 Javascript
js仿搜狐视频记录片列表展示效果
2020/05/30 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
Python基于分析Ajax请求实现抓取今日头条街拍图集功能示例
2018/07/19 Python
Python画图高斯分布的示例
2019/07/10 Python
Python进程的通信Queue、Pipe实例分析
2020/03/30 Python
分布式全文检索引擎ElasticSearch原理及使用实例
2020/11/14 Python
详解CSS透明opacity和IE各版本透明度滤镜filter的最准确用法
2016/12/20 HTML / CSS
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
渔夫的故事教学反思
2014/02/14 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
幼儿教师个人总结
2015/02/05 职场文书
统计员岗位职责
2015/02/11 职场文书
远程教育集中轮训基层干部培训班学习心得体会
2016/01/09 职场文书