Angular中$state.go页面跳转并传递参数的方法

遇到一个页面跳转的时候，在跳转后的页面获取跳转前页面的数据,我想到用一种是localstorage，一种用broadcast和on，然后老大说不用这么麻烦，既然都$state.go了直接带参数，这次就介绍一下$state.go页面跳转传递参数。

1.路由页面（注意这里要在路由上添加一个参数用于传递数据，不然在页面跳转的时候会filter）

 .state("home.workpiece",{ // 跳转前的页面
   url:"/workpiece",
   views: {
    home: {
     templateUrl: prefix + "project/workpiece.html",
     controller: "workpieceCtrl"
    }
   }
  })
  .state("home.workpieceDetail",{  //跳转后的页面
   url:"/workpieceDetail?workpieceList",
   views: {
    home: {
     templateUrl: prefix + "project/workpiece_detail.html",
     controller: "workpieceDetailCtrl"
    }
   }
  })

也可以将参数放在params中

 .state("home.workpieceDetail",{
   url:"/workpieceDetail",
   views: {
    home: {
     templateUrl: prefix + "project/workpiece_detail.html",
     controller: "workpieceDetailCtrl"
    }
   }，
   params: {workpieceList:null}
  })

2.在workpieceCtrl中

3.workpieceDetailCtrl中

这样就可以将在页面跳转的时候传递数据了。希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 详解在Angularjs中ui-sref和$state.go如何传递参数

    详解在Angularjs中ui-sref和$state.go如何传递参数

    1 ui-sref.$state.go 的区别 ui-sref 一般使用在 <a>...</a>: <a ui-sref="message-list">消息中心</a> $state.go('someState')一般使用在 controller里面: .controller('firstCtrl', function($scope, $state) { $state.go('login'); }); 这两个本质上是一样的东西,我们看ui

  • 老生常谈angularjs中的$state.go

    路由是这么定义的: $stateProvider .state('page1', { url: '/page1', templateUrl: 'views/page1.htm', controller: 'page1Ctrl' }) .state('page2', { url: '/page2/:type', templateUrl: 'views/page2.htm', controller: 'page2Ctrl' }); 用ng-href跳转的话,是这么写的: ng-href="#/pag

  • Angular中$state.go页面跳转并传递参数的方法

    遇到一个页面跳转的时候,在跳转后的页面获取跳转前页面的数据,我想到用一种是localstorage,一种用broadcast和on,然后老大说不用这么麻烦,既然都$state.go了直接带参数,这次就介绍一下$state.go页面跳转传递参数. 1.路由页面(注意这里要在路由上添加一个参数用于传递数据,不然在页面跳转的时候会filter) .state("home.workpiece",{ // 跳转前的页面 url:"/workpiece", views: { h

  • 微信小程序 navigator 跳转url传递参数

    微信小程序 navigator 跳转url传递参数

     微信小程序 navigator 跳转url传递参数 使用方法说明 (1)传值:在navigator的属性url后拼接?id(参数名字)=要传递的值 (如果多个参数用&分开 &name=value&--.) (2)取值:options 是包含url地址中参数的对象,可以直接 点 获取. 扩展 JS获取web页面地址栏中的参数. https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&am

  • jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】

    jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】

    本文实例讲述了jQuery实现浏览器之间跳转并传递参数功能.分享给大家供大家参考,具体如下: one.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.slim.js">&l

  • vue中页面跳转拦截器的实现方法

    本文主要给大家介绍的是关于vue页面跳转拦截器的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 登录拦截逻辑 第一步:路由拦截 首先在定义路由的时候就需要多添加一个自定义字段requireAuth,用于判断该路由的访问是否需要登录.如果用户已经登录,则顺利进入路由, 否则就进入登录页面.在路由管理页面添加meta字段 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const r

  • PHP页面跳转操作实例分析(header方法)

    本文实例分析了PHP页面跳转操作.分享给大家供大家参考,具体如下: 跳转 header()为php函数,向浏览器发送指定命令 html: <meta http-equiv="Refresh" content="3;url=other.php"/> 立即跳转: header('Location:other.php'); //file_put_contents('bee.txt','execute'); die; 执行header时候,并不是立即结束,而是会

  • Vue页面跳转动画效果的实现方法

    前言 现如今移动端APP对用户体验方面的要求越来越高了,最近致力于用户体验优化,因为需要实现类似APP页面切换的动画效果,百度google搜索资料不是很全,所以自己写文档,在实现效果的基础上,顺便恶补一波VueRouter及CSS过渡动画的知识点,欢迎有兴趣的朋友多多指教. vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现

  • Fragment跳转时传递参数及结果回传的方法(推荐)

    今天总结一下Fragment间的参数传递及结果返回的方法. 效果图: 1.点击"加载第二个Fragment按钮",加载出第二个Fragment,同时传递过去参数:"从Fragment1传来的参数"这几个String: 2.当用户点击第二个Fragment中的几个图片时,将点中的结果返回给第一个Fragment,将用户的选择在第一个Fragment显示出来 一.基本架构搭建 首先,我们要把整个架构搭起来,然后再进行参数传递和回传 (一).基本XML构建: 根据上面的效

  • JAVASCRIPT实现的WEB页面跳转以及页面间传值方法

    但有时候,需要当某事件触发时,我们先做一些操作,然后再跳转,这时,就要用JAVASCRIPT来实现这一跳转功能. 下面是具体的做法: 一:跳转到新页面,并且是在新窗口中打开时: 复制代码 代码如下: function gogogo() { //do someghing here... window.open("test2.html"); } window是一个javascript对象,可以用它的open方法,需要注意的是,如果这个页面不是一相相对路径,那么要加http://,比如: 复

  • Android Intent实现页面跳转的两种方法

    Android Intent实现页面跳转的两种方法

    本文实例为大家分享了Intent实现页面跳转的两种的方法,供大家参考,具体内容如下 下图中两个不同的方法就是两种页面之间跳转的情况 1).跳转不返回数据 2).跳转返回数据 实例: 第一种启动方式(跳转不返回数据) 第二种启动方式(跳转返回数据) 先看第一种: 点击第一种启动方式按钮会出现右边的图,然后再点击Button按钮返回左边的界面,TextView中的内容没变. 再看第二种启动方式 不同的是,点击Button按钮返回左边的界面,TextView中的内容变成了你好. 下面是所有代码 And

  • Vue this.$router.push(参数)实现页面跳转操作

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转. push 后面可以是对象,也可以是字符串: // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId

随机推荐