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实现flash8类似的连接效果
May 03 Javascript
js获取某元素的class里面的css属性值代码
Jan 16 Javascript
常规表格多表头查询示例
Feb 21 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
Web前端开发工具——bower依赖包管理工具
Mar 29 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
玩转vue的slot内容分发
Sep 22 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
在Vue 中获取下拉框的文本及选项值操作
Aug 13 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 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 变量类型的强制转换
2009/10/23 PHP
关于php fread()使用技巧
2010/01/22 PHP
PHP json_encode中文乱码问题的解决办法
2013/09/09 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP概率计算函数汇总
2015/09/13 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
php中yii框架实例用法
2020/12/22 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
2019/05/29 Javascript
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
详解python中的模块及包导入
2019/08/30 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
LocalStorage记住用户和密码功能
2017/07/24 HTML / CSS
canvas实现手机的手势解锁的步骤详细
2020/03/16 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
加拿大大码女装购物网站:Penningtons
2020/12/26 全球购物
房地产促销活动方案
2014/03/01 职场文书
敬老院活动总结
2014/04/28 职场文书
求职自我评价怎么写
2015/03/09 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
2016党校学习心得体会
2016/01/07 职场文书
2016年小学党支部创先争优活动总结
2016/04/05 职场文书
Hive常用日期格式转换语法
2022/06/25 数据库