关于ng路由的传参问题(传递一个,多个参数)
在ng的页面条转传参数的方法,ui-sref,$state
Ui-sref:用于html页面进行单页面的跳转
$state:用于js代码中跳转
重点:明确传递方,接受方
[传递单个参数]
对于传递方:
传递方:ui-sref="home.ideas.edit({id:detailIdeas[0].idea.id})
或者:$state.go(home.ideas.edit,{id: detailIdeas[0].idea.id });
对于接受方:
.state('home.ideas.edit', {//编辑创意
url: '/detailsEdit/:id',
views: {
"part": {
templateUrl: 'tpls/ideas/edit.html',
controller:"ideas_edit_ctrl"
}
}
})
使用:
在ideas_edit_ctrl控制器中,我们可以直接使用$state.params 来获取我们传递的参数
(要先注入$state)
var idx={
ideaID:$state.params.id
};
[传递多个参数]($state)
其实传递参数的本质都是一样的,对于传递多个参数的我我们可以将多个参数组成一个对象,然后将这个对象转换成字符串,将字符串传递过去。
Em:
使用$state.go()传递多个参数;
对于传递方:
User_info={ name:’菱角’, age:15, skill:’angular’ };
$state.go("home.ideas.allIdeas",{user_right:JSON.stringify(user_info});
对于接受方:(还是保持不变)
.state('home.ideas.allIdeas', {//全部创意
url: '/allIdeas/:user_right',
views: {
"part": {
templateUrl: 'tpls/ideas/all_idea_list.html',
controller:'ideas_allIdeas_ctrl'
}
}
})
使用:
在ideas_allIdeas_ctrl控制器中
var user_right=JSON.parse($state.params.user_right);
user_right的结构: user_right={ name:’菱角’, age:15, skill:’angular’}
使用:ui-sref传递多个参数:
传递方:
<button ui-sref="home.ideas.edit({id:detailIdeas[0].idea.id,name:detailIdeas[0].idea.id.name})">go edit</button>
接受方:
.state('home.ideas.edit', {//编辑创意
url: '/detailsEdit?id&name',
views: {
"part": {
templateUrl: 'tpls/ideas/edit.html',
controller:"ideas_edit_ctrl"
}
}
})
在ideas_edit_ctrl控制器中,我们可以直接使用$state.params 来获取我们传递的参数(要先注入$state)
var idx={
ideaID:$state.params.id
ideaName:$state.params.name
};
关于ng路由的传参问题(传递一个,多个参数)的更多相关文章
- Vue-admin工作整理(四):路由组件传参
路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...
- VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)
vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...
- 对象引用 方法传参 值传递 引用传递 易错点 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...
- Vue学习之路由vue-router传参及嵌套小结(十)
一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- vue-router路由动态传参query和params的区别
1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...
- Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)
一.前言 1.公共轮播图的实现 2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...
- AngularJS实战之路由ui-view传参
angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路 ...
- Vue配置路由和传参方式及路由守卫!
安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...
- vue 路由动态传参 (多个)
动态传参 传值页面 客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面 客户详情CustomerDetails.vue 通过this.$router.para ...
随机推荐
- Laravel / Lumen 框架修改 创建时间 和 更新时间 对应字段
为避免浪费时间--先上解决方案 在Model中重写 CREATED_AT 和 UPDATED_AT 两个类常量就可以了,这两个常量分别是创建时间和更新时间的字段名. ================= ...
- jenkins coding.net webhook plugin
开源地址: https://github.com/yuzd/coding.net =========================================================== ...
- centos 安装gcc->联网 问题解决
本篇部分摘抄至TD_时缔 VMware虚拟机下安装centosmini版本,安装后第一件事就是yum update 但是有错:cannot find a valid baseurl for repo ...
- 【Eclipse】web项目部署新手篇
本文属于新手篇章,记录了Eclipse中部署web项目的步骤 1 . 添加Tomcat服务器 右键项目属性-->Run as-->Run on server弹出以下界面 点击finish之 ...
- Sleeping会话导致阻塞原理(下)
背景 最近给客户做优化时,有几个客户都存在.SLEEPING 会话中开启了事务,导致的大量阻塞,从而产生严重的性能问题.虽然在之前的文章我分享了Sleeping会话导致阻塞原理(上) .说明了什么是S ...
- MySQL · 引擎特性 · InnoDB IO子系统
前言 InnoDB做为一款成熟的跨平台数据库引擎,其实现了一套高效易用的IO接口,包括同步异步IO,IO合并等.本文简单介绍一下其内部实现,主要的代码集中在os0file.cc这个文件中.本文的分析默 ...
- Asp.Net 常用工具类之加密——对称加密DES算法(2)
又到周末,下午博客园看了两篇文章,关于老跳和老赵的程序员生涯,不禁感叹漫漫程序路,何去何从兮! 转眼毕业的第三个年头,去过苏州,跑过上海,从一开始的凌云壮志,去年背起行囊默默回到了长沙准备买房,也想有 ...
- js设置当前页面始终为框架最顶层
使用iframe做的页面,当session失效时,登录页面会显示在iframe里面 解决办法判断登录页面是否为顶层页面,不是的话刷新顶层页面
- 迷茫<第一篇:初到北京>
时光如梭,毕业四年了,遥想当年刚毕业的场景就像是昨天发生一样,这四年的人生,就是在不停的漂泊,不断的受挫.感慨良多,一言难以说尽. 2013年11月29号毕业,刚到北京的第二天我就顺利的找到了工作, ...
- 1179: [Apio2009]Atm
1179: [Apio2009]Atm Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 1629 Solved: 615[Submit][Status ...