在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路由的传参问题(传递一个,多个参数)的更多相关文章

  1. Vue-admin工作整理(四):路由组件传参

    路由组件传参:如果在一个页面中,需要根据路由去获得参数,去对页面进行一些逻辑处理,首先可以通过this.$router来获取路由实例的参数,这样页面组件和路由就进行了耦合,为了进行分离,更大程度复用, ...

  2. VueJs(11)---vue-router(命名路由,命名视图,重定向别名,路由组件传参)

    vue-router 上篇文章讲了第一篇vue-router相关文章,文章地址:VueJs(10)---vue-router(进阶1) 一.命名路由 有时候,通过一个名称来标识一个路由显得更方便一些, ...

  3. 对象引用 方法传参 值传递 引用传递 易错点 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  4. Vue学习之路由vue-router传参及嵌套小结(十)

    一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. vue-router路由动态传参query和params的区别

    1.query方式传参和接收参数 //路由 { path: '/detail', //这里不需要参入参数 name: "detail", component: detail//这个 ...

  6. Vue(小案例_vue+axios仿手机app)_公共组件(路由组件传参)

    一.前言                    1.公共轮播图的实现                    2.组件传参,公共组件的实现 二.主要内容 1.公共轮播图的实现 (1)分析:当渲染不同的轮 ...

  7. AngularJS实战之路由ui-view传参

    angular路由传参 首页 <!DOCTYPE html> <html ng-app="app"> <head> <title>路 ...

  8. Vue配置路由和传参方式及路由守卫!

    安装路由 npm i vue-router -S 引入路由 import VueRouter form VueRouter 注入路由模块 Vue.use(VueRouter) 定义路由匹配规则 let ...

  9. vue 路由动态传参 (多个)

    动态传参 传值页面  客户列表clientList.vue 路由 router.js 配置路由 接收参数的页面  客户详情CustomerDetails.vue 通过this.$router.para ...

随机推荐

  1. c++编程思想(一)--对象导言

    回过头来看c++编程思想第一章,虽然只是对c++知识的一个总结,并没有实质性知识点,但是收获还是蛮多的! 下面感觉是让自己茅塞顿开的说法,虽然含义并不是很准确,但是很形象(自己的语言): 1.类描述了 ...

  2. AJSX 传输数组

    如果要利用ajax传输数组,或者传输多个(不知道有多少个)class的某一属性的值,例如: 要将这三个数据传入php编辑界面,图片显示有三个数据,但实际上,数据的多少是由数据库所导出的数据 决定的.如 ...

  3. JavaScript中国象棋程序(3) - 电脑自动走棋

    "JavaScript中国象棋程序" 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序.这是教程的第3节. 这一系列共有9个部分: 0.JavaScript中国象 ...

  4. ajaxFileUpload.js 无刷新上传图片,支持多个参数同时上传,支持 ie6-ie10

    /* 131108-xxj-ajaxFileUpload.js 无刷新上传图片 jquery 插件,支持 ie6-ie10 依赖:jquery-1.6.1.min.js 主方法:ajaxFileUpl ...

  5. Extjs mvc

    MVC的模式,模型(Models)和控制器(Controllers) Model模型 是字段和它们的数据的集合,例如User模型带有username和password字段,模型知道如何持久化自己的数据 ...

  6. JSP 学习一

    今天开始JSP的学习,作为Web开发人员,对JSP的开发是必不可少的,因此有必要对JSP进行掌握和学习:为此开始JSP的学习: 今日目标: 1)什么是JSP? 2)JSP的运行机制? 3)JSP的三种 ...

  7. 剑指offer编程题Java实现——二维数组中的查找

    题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数.   下面是我实现的代码 ...

  8. ASP.NET使用WebApi接口实现与Android客户端的交互(图片或字符串的接收与回传)

    最近在使用WebApi   做下记录 //此接口实现接收Android客户端上传的JSON格式的信息,并返回"nihao"字符串 [Route("ReceiveData& ...

  9. Spring+SpringMVC+MyBatis+easyUI整合基础篇(三)搭建步骤

    框架介绍: 主角即Spring.SpringMVC.MyBatis.easyUI,大家应该也都有所了解,概念性的东西就不写了,有万能的百度.   工作环境:       jdk 1.7       m ...

  10. tomcat 假死

    1.1 编写目的 为了方便大家以后发现进程假死的时候能够正常的分析并且第一时间保留现场快照.1.2编写背景最近服务器发现tomcat的应用会偶尔出现无法访问的情况.经过一段时间的观察最近又发现有台to ...