对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 相关文章推荐
利用div+jquery自定义滚动条样式的2种方法
Jul 18 Javascript
浏览器兼容console对象的简要解决方案分享
Oct 24 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
Dec 02 Javascript
源码分析Vue.js的监听实现教程
Apr 23 Javascript
vue左右侧联动滚动的实现代码
Jun 06 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
node.js实现上传文件功能
Jul 15 Javascript
js实现图片实时时钟
Jan 15 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
session在PHP大型web应用中的使用
2011/06/25 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP实现货币换算的方法
2014/11/29 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
jQuery LigerUI 使用教程入门篇
2012/01/18 Javascript
window.onload和$(function(){})的区别介绍
2013/10/30 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
Express的路由详解
2015/12/10 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
微信小程序 封装http请求实例详解
2017/01/16 Javascript
ECMAScript6--解构
2017/03/30 Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
2017/05/05 Javascript
[03:41]DOTA2上海特锦赛小组赛第三日recap精彩回顾
2016/02/28 DOTA
python构建深度神经网络(续)
2018/03/10 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
PyQt5 多窗口连接实例
2019/06/19 Python
django数据关系一对多、多对多模型、自关联的建立
2019/07/24 Python
python自动发微信监控报警
2019/09/06 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
美国领先的奢侈手表在线零售商:WatchMaxx
2017/12/17 全球购物
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
幼儿园教学随笔感言
2014/02/23 职场文书
美术指导助理求职信
2014/04/20 职场文书
借款协议书范本
2014/04/22 职场文书
企业形象策划方案
2014/05/29 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
Java实现简单小画板
2022/06/10 Java/Android