angular1.x ui-route传参的三种写法小结

如下所示：

.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;
}

一： 如何传递单个参数

首先，要在目标页面定义接受的参数：

传参，

ui-sref:

$state.Go:

接收参数，

在目标页面的controller里注入$stateParams，然后 "$stateParams.参数名" 获取

二：传递多个参数其实也很简单可以在上面的单个后面直接拼

1：目标页面定义需要传的传输个数

2：controll里面接受（注入$stateParams，然后 "$stateParams.参数名）

我这里是用页面绑定的值作为参数传过去，大家可以传固定的，具体业务具体对待

三：传递对象

$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传参的三种写法小结就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS使用ui-route实现多层嵌套路由的示例

    本文介绍了AngularJS使用ui-route实现多层嵌套路由的示例,分享给大家,具体如下: 一.预期实现效果: https://liyuan-meng.github.io/uiRouter-app/index.html (项目地址:https://github.com/liyuan-meng/uiRouter-app) 二.分析题目要求,给出依赖关系,构建项目 1. service: (1)根据条件查询people数据checkPeople.service,不给出条件则查询所有. (2)得到

  • AngularJS基于ui-route实现深层路由的方法【路由嵌套】

    AngularJS基于ui-route实现深层路由的方法【路由嵌套】

    本文实例讲述了AngularJS基于ui-route实现深层路由的方法.分享给大家供大家参考,具体如下: 1.前面我们通过了简单的ng-route实现了简单层次的路由,对于深层次的路由,我们可以通过ui-route来实现. (1)ng-route的局限性:一个页面无法嵌套多个视图,也就是说一个页面只能有包含一个页面一个控制器的切换. (2)ui-route的改进:在具有富客户端的单页应用中,要在一个页面中呈现不同的视图,我们可以通过ui-route实现路由的嵌套. 2 . ui-route的使用

  • AngulaJS路由 ui-router 传参实例

    在这里分享我做的一个使用ui-router 传参的小demo 1.首先第一步设置入口文件index.html,注意加载的顺序,先加载包,再加载自己写的控制器. <!doctype html> <html lang="en" ng-app="routerApp"> <head> <meta charset="utf-8"> <meta name="viewport" cont

  • angular1.x ui-route传参的三种写法小结

    如下所示: .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){

  • React路由组件传参的三种方式(params、search、state)

    React路由组件传参的三种方式(params、search、state)

    目录 向路由组件传递params参数 向路由组件传递search参数 向路由组件传递state参数 总结三种向路由组件传参的方式 向路由组件传递params参数 当点击消息1这个导航链接时,展示下方对应的Detail路由组件,并向这个组件传递params参数(ID,TITLE,CONTENT)信息. 向路由组件传递params参数:在路径后面跟上想要传递的值 { messageArr.map((msgObj) => { return ( <li key={msgObj.id}> <

  • C#实现向多线程传参的三种方式实例分析

    本文实例讲述了C#实现向多线程传参的三种方式.分享给大家供大家参考,具体如下: 从<C#高级编程>了解到给线程传递参数有两种方式,一种方式是使用带ParameterizedThreadStart委托参数的Thread构造函数,另一种方式是创建一个自定义类,把线程的方法定义为实例的方法,这样就可以初始化实例的数据,之后启动线程. 方式一:使用ParameterizedThreadStart委托 如果使用了ParameterizedThreadStart委托,线程的入口必须有一个object类型的

  • 浅谈React Native 传参的几种方式(小结)

    在React Native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的方式给大家 React Navigation 导航传值 推荐指数: ♥ ♥ ♥ ♥ ♥ 适用范围: 相互跳转的页面间传值 兼容性: IOS/Android 原理: React Navigation 为页面的 props 上挂载了 navigation 对象, 可用来做路由跳转,在做页面跳转时可以携带参数/回调方法前往目标页面, 从而达到传参的目的 说明

  • java返回集合为null还是空集合及空集合的三种写法小结

    目录 返回集合为null还是空集合及空集合的三种写法 返回空List的方式 方式一:new ArrayList()   方式二:new ArrayList(0) 方式三:Collections.emptyList()(推荐) 返回集合为null还是空集合及空集合的三种写法 个人认为在自己写接口时,需要返回集合时返回一个空集合,比如mybatis查询如果返回一个集合,结果为空时也会返回一个空集合而不是null. 那么这样有什么好处呢?最大的好处就是调用方不用在判断是否为null,可以直接用,因为不

  • vue路由传参的基本实现方式小结【三种方式】

    本文实例讲述了vue路由传参的基本实现方式.分享给大家供大家参考,具体如下: 前言 vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转.传参方式可划分为 params 传参和 query 传参,而 params 传参又可分为在 url 中显示参数和不显示参数两种方式,这就是vue路由传参的三种方式. 方式一:params 传参(显示参数) params 传参(显示参数)又可分为 声明式 和 编程式 两种方式 1.声明式 router-link 该方式是通过 router-

  • 解决element UI 自定义传参的问题

    如下所示: <el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect" ></el-autocomplete> 这里的 hanleSelect 默认绑定的参数是选中的那条数据. 但是如果一个页面有好几个相同的组件,要想知道选中的是第几个

  • 浅谈react路由传参的几种方式

    浅谈react路由传参的几种方式

    第一种传参方式,动态路由传参 通过设置link的path属性,进行路由的传参,当点击link标签的时候,会在上方的url地址中显示传递的整个url <Link to='/home?name=dx'>首页</Link> 如果想真正获取到传递过来的参数,需要在对应的子组件中 this.props.location.search 获取字符串,再手动解析 因为传参能够被用户看见,传递获取比较麻烦,所以不推荐 第二种传参方式,隐式路由传参 <Link to={{ pathname: '

  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4 . 编程式路由传参 除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. 1. 通过 params 传递 路由配置 路径参数 用冒号 : 表示. const routes = [ // 动态段以冒号开始 { pat

  • vue-router传参的4种方式超详细讲解

    目录 一.router-link路由导航方式传参 二.调用$router.push实现路由传参 三.通过路由属性name匹配路由,再根据params传递参数 四.通过query来传递参数 总结 一.router-link路由导航方式传参 父组件:<router-link to="/跳转到的路径/传入的参数"></router-link> 子组件:this.$route.params.content接受父组件传递过来的参数 例如: 路由配置: bashbash{p

随机推荐