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实现的仿新浪微博完美的时间组件升级版
Dec 20 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
Nov 24 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
详解Webpack实战之构建 Electron 应用
Dec 25 Javascript
解决vue 更改计算属性后select选中值不更改的问题
Mar 02 Javascript
p5.js入门教程之小球动画示例代码
Mar 15 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
js 计算月/周的第一天和最后一天代码
Feb 01 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 危险函数全解析
2009/09/09 PHP
解析dedeCMS验证码的实现代码
2013/06/07 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
详解PHP实现定时任务的五种方法
2016/07/25 PHP
javascript parseInt与Number函数的区别
2010/01/21 Javascript
jquery validator 插件增加日期比较方法
2010/02/21 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
JQuery实现table行折叠效果以JSON做数据源
2014/05/26 Javascript
Javascript中的包装类型介绍
2015/04/02 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
Bootstrap精简教程中秋大放送
2016/09/15 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
学习LayUI时自研的表单参数校验框架案例分析
2019/07/29 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
python实现的简单抽奖系统实例
2015/05/22 Python
Python的装饰器模式与面向切面编程详解
2015/06/21 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
python实现杨氏矩阵查找
2019/03/02 Python
详解CSS3中nth-child与nth-of-type的区别
2017/01/05 HTML / CSS
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
土木工程毕业生推荐信
2013/10/28 职场文书
酒店爱岗敬业演讲稿
2014/09/02 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
oracle通过存储过程上传list保存功能
2021/05/12 Oracle
Python学习之时间包使用教程详解
2022/03/21 Python
Python使用永中文档转换服务
2022/05/06 Python