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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
JavaScript随机生成信用卡卡号的方法
Apr 07 Javascript
基于JS实现数字+字母+中文的混合排序方法
Jun 06 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
Apr 16 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
May 04 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
JavaScript实现省市联动效果
Nov 22 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 异步执行方法,模拟多线程的应用分析
2013/06/03 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
jquery实现点击文字可编辑并修改保存至数据库
2014/04/15 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
javaScript中的原型解析【推荐】
2016/05/05 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
Bootstrap 实现表格样式、表单布局的实例代码
2018/12/09 Javascript
Django基于ORM操作数据库的方法详解
2018/03/27 Python
python3使用matplotlib绘制条形图
2020/03/25 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python opencv进行图像拼接
2020/03/27 Python
简单了解python列表和元组的区别
2020/05/14 Python
Python类super()及私有属性原理解析
2020/06/15 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
过滤器的用法
2013/10/08 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
个人自我剖析材料
2014/02/07 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
法制宣传标语集锦
2014/06/25 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang