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跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
Bootstrap每天必学之缩略图与警示窗
Nov 29 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
js+canvas实现验证码功能
Sep 21 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
Oct 12 Javascript
Node.js+ELK日志规范的实现
May 23 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
vue中注册自定义的全局js方法
Nov 15 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 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函数http_build_query使用详解
2014/08/20 PHP
PHP GD库生成图像的几个函数总结
2014/11/19 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
JavaScript EasyPager 分页函数
2011/05/25 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
python中pandas.DataFrame对行与列求和及添加新行与列示例
2017/03/12 Python
Python matplotlib画图实例之绘制拥有彩条的图表
2017/12/28 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
TensorFlow Autodiff自动微分详解
2020/07/06 Python
使用HTML5 Geolocation实现一个距离追踪器
2018/04/09 HTML / CSS
运动会解说词50字
2014/01/18 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
协议书样本
2014/04/23 职场文书
小学见习报告
2014/10/31 职场文书
学雷锋倡议书
2015/01/19 职场文书
公司承诺书格式范文
2015/04/28 职场文书
超市主管竞聘书
2015/09/15 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android