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 二进制运算技巧解析
Nov 27 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
Aug 29 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
JavaScript制作弹出层效果
Dec 02 Javascript
node.js学习之交互式解释器REPL详解
Dec 08 Javascript
vue 开发一个按钮组件的示例代码
Mar 27 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
Nuxt 项目性能优化调研分析
Nov 07 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue组件是如何解析及渲染的?
Jan 13 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
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
多种JQuery循环滚动文字图片效果代码
2020/06/23 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
Node.js中常规的文件操作总结
2016/10/13 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
label+input实现按钮开关切换效果的实例
2017/08/16 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
[02:38]DOTA2亚洲邀请赛小组赛精彩集锦:Wings完美团击溃对手
2017/03/29 DOTA
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Python实现Linux监控的方法
2019/05/16 Python
python3使用Pillow、tesseract-ocr与pytesseract模块的图片识别的方法
2020/02/26 Python
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
碧欧泉Biotherm加拿大官方网站:法国高端护肤品牌
2019/10/18 全球购物
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
数学专业推荐信范文
2013/11/21 职场文书
行政人员工作职责
2013/12/05 职场文书
应届毕业生求职信范文
2013/12/18 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
护林员个人总结
2015/03/04 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
新学期感想
2015/08/10 职场文书
怎样做好公众演讲能力?
2019/08/28 职场文书