angular1.x ui-route传参的三种写法小结


Posted in Javascript onAugust 31, 2018

如下所示:

.state('classrooms',{
 url: '/classrooms/:id'
})
.state('classrooms',{
 url: '/classrooms/{id}'
})
.state('activities',{
 url: '/activities',
 params: {
 id: { value: 42}
 }
})

localhost:3000/#/classrooms/3

function ClassroomController($stateParams){
 var classroomID = $stateParams.id;
}

一: 如何传递单个参数

首先,要在目标页面定义接受的参数:

angular1.x ui-route传参的三种写法小结

传参,

ui-sref:

angular1.x ui-route传参的三种写法小结

$state.Go:

angular1.x ui-route传参的三种写法小结

接收参数,

在目标页面的controller里注入$stateParams,然后 "$stateParams.参数名" 获取

angular1.x ui-route传参的三种写法小结

二:传递多个参数其实也很简单可以在上面的单个后面直接拼

1:目标页面定义需要传的传输个数

angular1.x ui-route传参的三种写法小结

2:controll里面接受(注入$stateParams,然后 "$stateParams.参数名)

angular1.x ui-route传参的三种写法小结

我这里是用页面绑定的值作为参数传过去,大家可以传固定的,具体业务具体对待

三:传递对象

$stateProvider
 .state('app.example1', {
  url: '/example',
  views: {
   'menuContent': {
   templateUrl: 'templates/example.html',
   controller: 'ExampleCtrl'
   }
  }
  })
  .state('app.example2', {
  url: '/example2/:object',
  views: {
   'menuContent': {
   templateUrl: 'templates/example2.html',
   controller: 'Example2Ctrl'
   }
  }
  })

2)

.controller('ExampleCtrl', function ($state, $scope, UserService) {
 
 
 $scope.goExample2 = function (obj) {
 
  $state.go("app.example2", {object: JSON.stringify(obj)});
 }
 
 })
 .controller('Example2Ctrl', function ($state, $scope, $stateParams) {
 
 console.log(JSON.parse($state.params.object));
 
 
 })

以上这篇angular1.x ui-route传参的三种写法小结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
原生js写的放大镜效果
Aug 22 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
JavaScript实现MIPS乘法模拟的方法
Apr 17 Javascript
Javascript节点关系实例分析
May 15 Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 Javascript
Augularjs-起步详解
Jul 08 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
原生JS封装_new函数实现new关键字的功能
Aug 12 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 #Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 #Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 #Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 #Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
You might like
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
AJAX架构之Dojo篇
2007/04/10 Javascript
让Firefox支持event对象实现代码
2009/11/07 Javascript
input的focus方法使用
2010/03/13 Javascript
boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器
2010/11/21 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
2012/06/22 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
js计算文本框输入的字符数
2015/10/23 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
java遇到微信小程序 "支付验证签名失败" 问题解决
2019/12/22 Javascript
详解vue beforeEach 死循环问题解决方法
2020/02/25 Javascript
[20:30]职业巡回赛回顾
2018/08/09 DOTA
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python 处理数据的实例详解
2017/08/10 Python
详解Python进程间通信之命名管道
2017/08/28 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
pyinstaller参数介绍以及总结详解
2019/07/12 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
服务之星获奖感言
2014/01/21 职场文书
mysql 如何获取两个集合的交集/差集/并集
2021/06/08 MySQL
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript