Angular.js中控制器之间的传值详解


Posted in Javascript onApril 24, 2017

前言

每个controller都会有自己的scope,所有的scope都是属于 $rootScope的子或者子的子...

那么问题就好解决了,通过 $rootScope.$broadcast 广播的事件每个controller都能收到事件

另外,我的经验是,尽量不要用event传数据。应该建立一个service来保存数据,并且设置相应getter/setter,具体如下:

 每个controller依赖service, call service.setter(...)

统一的service.setter(...)在改完数据后可以$emit('data-updated')

每个controller里$on('data-updated', function(){ $scope.data = service.getData() })

通过Angular的话可以通过下面四种方法

1、event

这里可以有两种方式,一种是$scope.$emit,然后通过监听$rootScope的事件获取参数;另一种是$rootScope.$broadcast,通过监听$scope的事件获取参数。

这两种方法在最新版本的Angular中已经没有性能区别了,主要就是事件发送的方向不同,可以按实际情况选择。

2、service

可以创建一个专用的事件Service,也可以按照业务逻辑切分,将数据存储在相应的Service中,因为已经有人提过了就不赘述了。

3、$rootScope

这个方法可能会比较dirty一点,胜在方便,也就是把数据存在$rootScope中,这样各个子$scope都可以调用,不过需要注意一下生命周期

4、直接使用$scope.$nextSibling及类似的属性

类似的还有$scope.$parent。这个方法的缺点就更多了,官方不推荐使用任何$开头的属性,既增加了耦合,又需要处理异步的问题,而且scope的顺序也不是固定的。不推荐

另外就是通过本地存储、全局变量或者现代浏览器的postMessage来传递参数了,除非特殊情况,请避免这类方式。

直接建一个service,不要用什么事件,项目一大N多个controller或者N久再去维护会玩死你,service里提供存和取的方法,简单明了,API容易查找和修改,调试也方便无混乱的依赖关系

1、利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会 影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值 的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。

基本类型

function Sandcrawler($scope) {
 $scope.location = "Mos Eisley North";
 $scope.move = function(newLocation) {
 $scope.location = newLocation;
 }}function Droid($scope) {
 $scope.sell = function(newLocation) {
 $scope.location = newLocation;
 }}// html<div ng-controller="Sandcrawler">
 <p>Location: {{location}}</p>
 <button ng-click="move('Mos Eisley South')">Move</button>
 <div ng-controller="Droid">
 <p>Location: {{location}}</p>
 <button ng-click="sell('Owen Farm')">Sell</button>
 </div></div>

对象

function Sandcrawler($scope) {
 $scope.obj = {location:"Mos Eisley North"};}function Droid($scope) {
 $scope.summon = function(newLocation) {
 $scope.obj.location = newLocation;
 }}// html<div ng-controller="Sandcrawler">
 <p>Sandcrawler Location: {{location}}</p>
 <div ng-controller="Droid">
 <button ng-click="summon('Owen Farm')">
 Summon Sandcrawler
 </button>
 </div></div>

2、基于事件的方式

在一般情况下基于继承的方式已经足够满足大部分情况了,但是这种方式没有实现兄弟控制器之间的通信方式,所以引出了事件的方式 。基于事件的方式中我们可以里面作用的$on,$emit,$boardcast这几个方式来实现,其中$on表示事件监听,$emit表示向父级以上的 作用域触发事件, $boardcast表示向子级以下的作用域广播事件。参照以下代码:

向上传播事件

function Sandcrawler($scope) {
 $scope.location = "Mos Eisley North";
 $scope.$on('summon', function(e, newLocation) {
 $scope.location = newLocation;
 });}function Droid($scope) {
 $scope.location = "Owen Farm";
 $scope.summon = function() {
 $scope.$emit('summon', $scope.location);
 }}// html<div ng-controller="Sandcrawler">
 <p>Sandcrawler Location: {{location}}</p>
 <div ng-controller="Droid">
 <p>Droid Location: {{location}}</p>
 <button ng-click="summon()">Summon Sandcrawler</button>
 </div></div>

向下广播事件

function Sandcrawler($scope) {
 $scope.location = "Mos Eisley North";
 $scope.recall = function() {
 $scope.$broadcast('recall', $scope.location);
 }}function Droid($scope) {
 $scope.location = "Owen Farm";
 $scope.$on('recall', function(e, newLocation) {
 $scope.location = newLocation;
 });}//html<div ng-controller="Sandcrawler">
 <p>Sandcrawler Location: {{location}}</p>
 <button ng-click="recall()">Recall Droids</button>
 <div ng-controller="Droid">
 <p>Droid Location: {{location}}</p>
 </div>
</div>

从这个用法我们可以引申出一种用于兄弟控制间进行通信的方法,首先我们一个兄弟控制中向父作用域触发一个事件,然后在父作用域 中监听事件,再广播给子作用域,这样通过事件携带的参数,实现了数据经过父作用域,在兄弟作用域之间传播。这里要注意的是,通过父元素作为中介进行传递的话,兄弟元素用的事件名不能一样,否则会进入死循环。

请看代码:

兄弟作用域之间传播

function Sandcrawler($scope) {
 $scope.$on('requestDroidRecall', function(e) {
 $scope.$broadcast('executeDroidRecall');
 });}function Droid($scope) {
 $scope.location = "Owen Farm";
 $scope.recallAllDroids = function() {
 $scope.$emit('requestDroidRecall');
 }
 $scope.$on('executeDroidRecall', function() { 
 $scope.location = "Sandcrawler"
 });}// html<div ng-controller="Sandcrawler">
 <div ng-controller="Droid">
 <h2>R2-D2</h2>
 <p>Droid Location: {{location}}</p>
 <button ng-click="recallAddDroids()">Recall All Droids</button>
 </div>
 <div ng-controller="Droid">
 <h2>C-3PO</h2>
 <p>Droid Location: {{status}}</p>
 <button ng-click="recallAddDroids()">Recall All Droids</button>
 </div></div>

3、angular服务的方式

在ng中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:

var app = angular.module('myApp', []);
app.factory('instance', function(){
 return {};});
app.controller('MainCtrl', function($scope, instance) {
 $scope.change = function() {
 instance.name = $scope.test;
 };});
app.controller('sideCtrl', function($scope, instance) {
 $scope.add = function() {
 $scope.name = instance.name;
 };});//html<div ng-controller="MainCtrl">
 <input type="text" ng-model="test" />
 <div ng-click="change()">click me</div>
</div><div ng-controller="sideCtrl">
 <div ng-click="add()">my name {{name}}</div></div>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用Javscript实现表单复选框的全选功能
May 25 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 Javascript
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
node.js到底要不要加分号浅析
Jul 11 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
May 12 Javascript
Vue scoped及deep使用方法解析
Aug 01 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 #jQuery
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 #jQuery
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 #Javascript
angularjs中的$eval方法详解
Apr 24 #Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 #Javascript
angularjs中回车键触发某一事件的方法
Apr 24 #Javascript
浅谈angularjs中响应回车事件
Apr 24 #Javascript
You might like
PHP中把对象转换为关联数组代码分享
2015/04/09 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
Javascript简单实现可拖动的div
2013/10/22 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
jQuery异步验证用户名是否存在示例代码
2014/05/21 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
jQuery简单实现页面元素置顶时悬浮效果示例
2016/08/01 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
2017/12/27 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
Python爬虫回测股票的实例讲解
2021/01/22 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
中餐厅主管的职责范文
2014/02/04 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
酒店节能减排方案
2014/05/26 职场文书
绿色校园广播稿
2014/10/13 职场文书
优秀员工推荐材料
2014/12/20 职场文书
关于MybatisPlus配置双数据库驱动连接数据库问题
2022/01/22 Java/Android
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers