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 相关文章推荐
jQuery 源代码显示控件 (Ajax加载方式).
May 18 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
js中继承的几种用法总结(apply,call,prototype)
Dec 26 Javascript
JavaScript eval() 函数介绍及应用示例
Jul 29 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
js实现带积分弹球小游戏
Jul 21 Javascript
如何利用JS将手机号中间四位变成*号
Sep 29 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
全国FM电台频率大全 - 18 湖南省
2020/03/11 无线电
php中的buffer缓冲区用法分析
2019/05/31 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
Jquery 弹出层插件实现代码
2009/10/24 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[02:43]DOTA2亚洲邀请赛场馆攻略——带你走进东方体育中心
2018/03/19 DOTA
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
python检测某个变量是否有定义的方法
2015/05/20 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
Python实现的径向基(RBF)神经网络示例
2018/02/06 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
python读取LMDB中图像的方法
2018/07/02 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Pytorch之contiguous的用法
2019/12/31 Python
Pycharm制作搞怪弹窗的实现代码
2021/02/19 Python
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
霸王洗发水广告词
2014/03/14 职场文书
解除劳动合同协议书范本
2014/09/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python