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 相关文章推荐
分享别人写的一个小型js框架
Aug 13 Javascript
innerText和innerHTML 一些问题分析
May 18 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
Mar 19 Javascript
jquery自定义下拉列表示例
Apr 25 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
PHP项目开发中最常用的自定义函数整理
2010/12/02 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
php程序内部post数据的方法
2015/03/31 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
2008/05/16 Javascript
img标签中onerror用法
2009/08/13 Javascript
jQuery 打造动态渐变按钮 详细图文教程
2010/04/25 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
2015/10/21 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
Python实现批量下载文件
2015/05/17 Python
详解python单例模式与metaclass
2016/01/15 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python中Lambda表达式详解
2019/11/20 Python
Python 读取 YUV(NV12) 视频文件实例
2019/12/09 Python
在pycharm中debug 实时查看数据操作(交互式)
2020/06/09 Python
Python实现弹球小游戏
2020/08/01 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
欧洲当代手工玻璃和瓷器的领先品牌:LSA International
2018/06/03 全球购物
网吧消防安全责任书
2014/07/29 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
幼儿园辞职信
2015/05/13 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2016优秀青年志愿者事迹材料
2016/02/25 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
MySQL 5.7常见数据类型
2021/07/15 MySQL