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

 更新时间:2017年05月09日 08:46:20   作者:Jiaen188  
这篇文章主要介绍了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中

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

相关文章

  • AngularJS基础 ng-click 指令示例代码

    AngularJS基础 ng-click 指令示例代码

    本文介绍AngularJS ng-click 指令,这里整理了ng-click指令的基础知识并且附有简单示例代码和实现效果图,有需要的小伙伴参考下
    2016-08-08
  • Angular4中的checkbox 全选按钮启用禁用

    Angular4中的checkbox 全选按钮启用禁用

    这篇文章主要介绍了Angular4中的checkbox 全选按钮启用禁用的相关资料,需要的朋友可以参考下
    2023-03-03
  • 详解Angular6.0使用路由步骤(共7步)

    详解Angular6.0使用路由步骤(共7步)

    这篇文章主要介绍了详解Angular6.0使用路由步骤(共7步),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • AngularJS基础学习笔记之简单介绍

    AngularJS基础学习笔记之简单介绍

    AngularJS 不仅仅是一个类库,而是提供了一个完整的框架。它避免了您和多个类库交互,需要熟悉多套接口的繁琐工作。它由Google Chrome的开发人员设计,引领着下一代Web应用开发。也许我们5年或10年后不会使用AngularJS,但是它的设计精髓将会一直被沿用。
    2015-05-05
  • Angular实现的进度条功能示例

    Angular实现的进度条功能示例

    这篇文章主要介绍了Angular实现的进度条功能,结合实例形式较为详细的分析了angular进度条功能的相关界面布局、功能等操作技巧,需要的朋友可以参考下
    2018-02-02
  • 浅谈Angular6的服务和依赖注入

    浅谈Angular6的服务和依赖注入

    这篇文章主要介绍了浅谈Angular6的服务和依赖注入,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • AngularJS路由切换实现方法分析

    AngularJS路由切换实现方法分析

    这篇文章主要介绍了AngularJS路由切换实现方法,结合具体实例形式分析了AngularJS路由切换的实现步骤与相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • AngularJS基础 ng-keyup 指令简单示例

    AngularJS基础 ng-keyup 指令简单示例

    本文主要介绍AngularJS ng-keyup 指令,这里对ng-keyup指令的基本资料进行了整理,并且附有代码示例,有需要的朋友可以看一下
    2016-08-08
  • AngularJS中的路由使用及实现代码

    AngularJS中的路由使用及实现代码

    本篇文章主要介绍了AngularJS中的路由使用及实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 举例讲解AngularJS中的模块

    举例讲解AngularJS中的模块

    这篇文章主要介绍了AngularJS中的模块,文中讲到了其应用模块和控制器模块的例子,需要的朋友可以参考下
    2015-06-06

最新评论