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 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
javascript 添加和移除函数的通用方法
Oct 20 Javascript
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
Jquery+asp.net后台数据传到前台js进行解析的方法
May 11 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
jquery中表单 多选框的一种巧妙写法
Sep 06 Javascript
jQuery事件与动画基础详解
Feb 23 Javascript
一个简易时钟效果js实现代码
Mar 25 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
详解vue配置后台接口方式
Mar 29 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/08 PHP
PHP之预定义接口详解
2015/07/29 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
jquery tools之tooltip
2009/07/25 Javascript
jQuery之浮动窗口实现代码(两种方法)
2010/09/08 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
JavaScript的漂亮的代码片段
2013/06/05 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
js获取隐藏元素宽高的实现方法
2016/05/19 Javascript
jQuery ajaxForm()的应用
2016/10/14 Javascript
解决option标签selected="selected"属性失效的问题
2017/11/06 Javascript
Vue-CLI 项目在pycharm中配置方法
2019/08/30 Javascript
jQuery 添加元素和删除元素的方法
2020/07/15 jQuery
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
Python 命令行非阻塞输入的小例子
2013/09/27 Python
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
TensorFlow实现Logistic回归
2018/09/07 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
Python 调用PIL库失败的解决方法
2019/01/08 Python
python正则爬取某段子网站前20页段子(request库)过程解析
2019/08/10 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
音乐系毕业生自荐信
2013/10/27 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
学校节能减排倡议书
2014/05/16 职场文书
基层党员公开承诺书
2014/05/29 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
2015年试用期工作总结
2014/12/12 职场文书
助学感谢信范文
2015/01/21 职场文书
Python基础详解之邮件处理
2021/04/28 Python
python全面解析接口返回数据
2022/02/12 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript