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 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
jquery keypress,keyup,onpropertychange键盘事件
Jun 25 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
Jan 25 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jquery实现鼠标点击后展开列表内容的导航栏效果
Sep 14 Javascript
详解js的事件处理函数和动态创建html标记方法
Dec 16 Javascript
微信小程序搜索组件wxSearch实例详解
Jun 08 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
PHP简单实现HTTP和HTTPS跨域共享session解决办法
2015/05/27 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
JavaScript监测ActiveX控件是否已经安装过的代码
2008/09/02 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js 优化次数过多的循环 考虑到性能问题
2011/03/05 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
JavaScript页面模板库handlebars的简单用法
2015/03/02 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
2015/12/10 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
基于javascript实现样式清新图片轮播特效
2016/03/30 Javascript
深入理解Angularjs中$http.post与$.post
2017/05/19 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
解决Vue 给mapState中定义的属性赋值报错的问题
2020/06/22 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
深入浅析Python传值与传址
2018/07/10 Python
彻底理解Python中的yield关键字
2019/04/01 Python
python 机器学习之支持向量机非线性回归SVR模型
2019/06/26 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python关于反射的实例代码分享
2020/02/20 Python
Django 解决阿里云部署同步数据库报错的问题
2020/05/14 Python
Pytorch转tflite方式
2020/05/25 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
建筑学专业自荐书
2014/07/09 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
爱牙日宣传活动总结
2015/02/05 职场文书
毕业论文答辩稿范文
2015/06/23 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS