Angular页面间切换及传值的4种方法


Posted in Javascript onNovember 04, 2016

本文实例为大家分享了Angular JS页面间切换及传值 的方法,供大家参考,具体内容如下Angular JS页面间切换及传值

1. 基于ui-router的页面跳转传参
(1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数传过去。

state('producers', {
 url: '/producers',
 templateUrl: 'views/producers.html',
 controller: 'ProducersCtrl'
})
.state('producer', {
 url: '/producer/:producerId',
 templateUrl: 'views/producer.html',
 controller: 'ProducerCtrl'
})

(2) 在producers.html中,定义点击事件,比如ng-click="toProducer(producerId)",在ProducersCtrl中,定义页面跳转函数 (使用ui-router的$state.go接口):

.controller('ProducersCtrl', function ($scope, $state) {
 $scope.toProducer = function (producerId) {
  $state.go('producer', {producerId: producerId});
 };
});

(3) 在ProducerCtrl中,通过ui-router的$stateParams获取参数producerId,譬如:

.controller('ProducerCtrl', function ($scope, $state, $stateParams) {
 var producerId = $stateParams.producerId;
});

2. 基于factory的页面跳转传参

举例:你有N个页面,每个页面都需要用户填选信息,最终引导用户至尾页提交,同时后一个页面要显示前面所有页面填写的信息。这个时候用factory传参是比较合理的选择(下面的代码是一个简化版,根据需求可以不同定制):

.factory('myFactory', function () {
 //定义factory返回对象
 var myServices = {}; 
 //定义参数对象
 var myObject = {};
 
 /**
  * 定义传递数据的set函数
  * @param {type} xxx
  * @returns {*}
  * @private
  */
 var _set = function (data) {
  myObject = data;  
 };

 /**
  * 定义获取数据的get函数
  * @param {type} xxx
  * @returns {*}
  * @private
  */
 var _get = function () {
  return myObject;
 };

 // Public APIs
 myServices.set = _set;
 myServices.get = _get;
 
 // 在controller中通过调set()和get()方法可实现提交或获取参数的功能
 return myServices;
 
});

3. 基于factory和$rootScope.$broadcast()的传参

(1) 举例:在一个单页中定义了nested views,你希望让所有子作用域都监听到某个参数的变化,并且作出相应动作。比如一个地图应用,某个$state中定义元素input,输入地址后,地图要定位,同时另一个状态下的列表要显示出该位置周边商铺的信息,此时多个$scope都在监听地址变化。
PS: $rootScope.$broadcast()可以非常方便的设置全局事件,并让所有子作用域都监听到。

.factory('addressFactory', ['$rootScope', function ($rootScope) {
 // 定义所要返回的地址对象 
 var address = {};
 
 // 定义components数组,数组包括街道,城市,国家等
 address.components = [];

 // 定义更新地址函数,通过$rootScope.$broadcast()设置全局事件'AddressUpdated'
 // 所有子作用域都能监听到该事件
 address.updateAddress = function (value) {
 this.components = value.slice();
 $rootScope.$broadcast('AddressUpdated');
 };
 
 // 返回地址对象
 return address;
}]);

(2) 在获取地址的controller中:

// 动态获取地址,接口方法省略
var component = {
 addressLongName: xxxx,
 addressShortName: xxxx,
 cityLongName: xxxx,
 cityShortName: xxxx   
};

// 定义地址数组
$scope.components = [];

$scope.$watch('components', function () {
 // 将component对象推入$scope.components数组
 components.push(component);
 // 更新addressFactory中的components
 addressFactory.updateAddress(components);
});

(3) 在监听地址变化的controller中:

// 通过addressFactory中定义的全局事件'AddressUpdated'监听地址变化
$scope.$on('AddressUpdated', function () {
 // 监听地址变化并获取相应数据
 var street = address.components[0].addressLongName;
 var city = address.components[0].cityLongName;

 // 通过获取的地址数据可以做相关操作,譬如获取该地址周边的商铺,下面代码为本人虚构
 shopFactory.getShops(street, city).then(function (data) {
  if(data.status === 200){
   $scope.shops = data.shops; 
  }else{
   $log.error('对不起,获取该位置周边商铺数据出错: ', data);
  }
 });
});

4. 基于localStorage或sessionStorage的页面跳转传参

注意事项:通过LS或SS传参,一定要监听变量,否则参数改变时,获取变量的一端不会更新。AngularJS有一些现成的WebStorage dependency可以使用,譬如gsklee/ngStorage · GitHub,grevory/angular-local-storage · GitHub。下面使用ngStorage来简述传参过程:

(1) 上传参数到localStorage - Controller A

// 定义并初始化localStorage中的counter属性
$scope.$storage = $localStorage.$default({
 counter: 0
});

// 假设某个factory(此例暂且命名为counterFactory)中的updateCounter()方法
// 可以用于更新参数counter
counterFactory.updateCounter().then(function (data) {
 // 将新的counter值上传到localStorage中
 $scope.$storage.counter = data.counter;
});

(2) 监听localStorage中的参数变化 - Controller B

$scope.counter = $localStorage.counter;
$scope.$watch('counter', function(newVal, oldVal) {
 // 监听变化,并获取参数的最新值
 $log.log('newVal: ', newVal); 
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript取消文本选定的实现代码
Nov 14 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
EasyUI,点击开启编辑框,并且编辑框获得焦点的方法
Mar 01 Javascript
jQuery的css() 方法使用指南
May 03 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
Vue.js Ajax动态参数与列表显示实现方法
Oct 20 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
JavaScript前后端JSON使用方法教程
Nov 23 Javascript
JavaScript实现优先级队列
Dec 06 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 #Javascript
RGB和YUV 多媒体编程基础详细介绍
Nov 04 #Javascript
javascript设置文本框光标的方法实例小结
Nov 04 #Javascript
使用Curl命令查看请求响应时间方法
Nov 04 #Javascript
JS创建对象的写法示例
Nov 04 #Javascript
微信公众号支付H5调用支付解析
Nov 04 #Javascript
AngularJS用户选择器指令实例分析
Nov 04 #Javascript
You might like
谈谈PHP语法(4)
2006/10/09 PHP
php学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
php 变量引用与变量销毁机制详细介绍
2016/12/05 PHP
PHP基于自定义函数生成笛卡尔积的方法示例
2017/09/30 PHP
PHP钩子实现方法解析
2019/05/21 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/09/26 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
2017/01/27 Javascript
js 获取图像缩放后的实际宽高,位置等信息
2017/03/07 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
JS计算输出100元钱买100只鸡问题的解决方法
2018/01/04 Javascript
vue中如何使用ztree
2018/02/06 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python中Class类用法实例分析
2015/11/12 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
外语系毕业生求职自荐信
2014/04/12 职场文书
学校评语大全
2014/05/06 职场文书
学习型党组织心得体会
2014/09/12 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
运动员入场前导词
2015/07/20 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
详解Redis主从复制实践
2021/05/19 Redis
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python