在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. 使用光盘iso实现Linux操作系统的自动安装部署

    前边写了一篇使用 PXE 的方式批量安装操作系统,不是任何时候任何地方都有环境来通过 PXE 方式来进行安装.如果此时需要通过光盘安装,默认的情况下是通过交互式方式进行安装,其实也可以通过 kicks ...

  2. jQuery UI 实例 - 自动完成(Autocomplete)

    http://www.runoob.com/jqueryui/example-autocomplete.html 自定义数据并显示 您可以使用自定义数据格式,并通过简单地重载默认的聚焦和选择行为来显示 ...

  3. 半小时C语言题目

    每个5分共100分.错选.多选.少选或不选均不得分. .[单选题]一个C程序的执行是从( ) A:本程序的main函数开始,到main函数结束 B:本程序文件的第一个函数开始,到本程序文件的最后一个函 ...

  4. devexpress表格控件gridcontrol实现纵向标头

    1.devexpress控件gridcontrol中的标头默认是横向的,如果要实现纵向标头应该怎么做呢.通过官网的资料整理了一个简单的案例,给大家分享一下.运行效果图如下: 2.数据绑定代码如下: D ...

  5. CEOI 2014 wall (最短路)

    描述:给定一个网格图,每个区间可能会有城市,求在边上建墙使无法从外边到达所有城市切所有城市必须联通 n,m<=400 首先对于30%的数据,n,m<=10我们可以考虑用数位dp来解决这个问 ...

  6. PHP中include()与require()的区别

    require 的使用方法如 require("MyRequireFile.php"); .这个函数通常放在 PHP 程序的最前面,PHP 程序在执行前,就会先读入 require ...

  7. 做推送,怎么能不了解推送的 4 种消息形式呢?( Android 篇)

    极光推送是为 App 提供第三方推送服务的平台之一,它提供四种消息形式:通知,自定义消息,富媒体和本地通知. 笔者将基于官方说明与个人理解来谈一下这四种消息.本篇为 Android 篇,iOS 篇入口 ...

  8. 基于 socket.io, 简单实现多平台类似你猜我画 socket 数据传输

    一.前言 socket.io 实现了实时双向的基于事件的通讯机制,是基于 webSocket 的封装,但它不仅仅包括 webSocket,还对轮询(Polling)机制以及其它的实时通信方式封装成了通 ...

  9. RxSwift 入坑好多天 - 终于有了一点理解

    一.前言 江湖上都在说现在就要赶紧学 swift 了,即将是 swift 的天下了.在 api 变化不大的情况下,swift 作为一门新的语言,集众家之所长,普通编码确实比 oc 要好用的多了 老早就 ...

  10. 或许是介绍Android Studio使用Git最详细的文章

    欢迎访问我的个人博客转发请注明出处:http://www.wensibo.top/2017/03/12/GitOnAS/ 前言 本文较长,图片很多很多,流量党慎入 使用Git已经有一段时间了,但是之前 ...