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 相关文章推荐
firefox下input type="file"的size是多大
Oct 24 Javascript
广泛收集的jQuery拖放插件集合
Apr 09 Javascript
深入理解Javascript里的依赖注入
Mar 19 Javascript
JavaScript 判断一个对象{}是否为空对象的简单方法
Oct 09 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
浅谈Node.js 中间件模式
Jun 12 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
Jul 12 Javascript
使用elementUI实现将图片上传到本地的示例
Sep 04 Javascript
vue环形进度条组件实例应用
Oct 10 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
深入学习JavaScript中的bom
May 27 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 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
Thinkphp自定义生成缩略图尺寸的方法
2019/08/05 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
toString()一个会自动调用的方法
2010/02/08 Javascript
js使用函数绑定技术改变事件处理程序的作用域
2011/12/26 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
2012/03/16 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
JS中getYear()和getFullYear()区别分析
2014/07/04 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
使用python在本地电脑上快速处理数据
2017/06/22 Python
windows下python安装小白入门教程
2018/09/18 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
python实现猜数游戏
2020/03/27 Python
使用python实现名片管理系统
2020/06/18 Python
python报错TypeError: ‘NoneType‘ object is not subscriptable的解决方法
2020/11/05 Python
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
专科毕业生学习生活的自我评价
2013/10/26 职场文书
园林设计师自荐信
2013/11/18 职场文书
承诺书模板大全
2015/05/04 职场文书
六五普法学习心得体会
2016/01/21 职场文书
小学运动会开幕词
2016/03/04 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js