Angular.js跨controller实现参数传递的两种方法

 更新时间:2017年02月20日 09:22:07   作者:xishiyi7  
这篇文章主要给大家介绍了关于Angular.js跨controller实现参数传递的两种方法,文中给出了详细的介绍和示例代码,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。

前言

由于controllers之间不共享scope,如果希望在controllers之间传递参数,可能需要通过其他的方式实现,以下是当前我用到的两种在controllers之间传递参数的方法。

注:参考文章Sharing Data Between Angular Controllers

一、service

可以写一个包含get/set的service,取参数/赋参数

.factory('paramService',function(){
 return {
 result:[],
 getResult:function(){
 return this.result;
 },
 setResult:function(res){
 this.result = res;
 }
 };
})

然后可以在controllerOne中赋值,在controllerTwo中取值

// 赋值
.controller('one',function(paramService){
 paramService.setResult('one');
})

// 取值
.controller('two',function(paramService){
 var param = paramService.getResult();
})

二、$stateParams

第二种方法用于路由间传递参数,用途也比较广泛,使用场景比较多

// 传参
.state('one',{
 url:'one',
 controller:'one',
 template:'one.html',
 params:{
 name:'john'
 }
})

// 取参
.controller('one',function($stateParams){
 var name = $stateParams.name;
})

others/localStorage

其他方法可以使用一些h5的小技巧,比如使用localStorage来存参/取参,其他的方法,暂时没想到也没用到,有待后续补充.

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular能带来一定的帮助,如果有疑问大家可以留言交流。

相关文章

  • AngularJS入门教程(一):静态模板

    AngularJS入门教程(一):静态模板

    这篇文章主要介绍了AngularJS入门教程(一):静态模板,本文是系列文章的第二篇,本系列会用一个项目来讲解AngularJS的使用,需要的朋友可以参考下
    2014-12-12
  • ANGULARJS中使用JQUERY分页控件

    ANGULARJS中使用JQUERY分页控件

    本文给大家介绍ANGULARJS中使用JQUERY分页控件,需要的朋友可以参考下
    2015-09-09
  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    Angularjs中$http以post请求通过消息体传递参数的实现方法

    这篇文章主要介绍了Angularjs中$http以post请求通过消息体传递参数的方法,结合实例形式分析了$http使用post请求传递参数的相关设置与使用技巧,需要的朋友可以参考下
    2016-08-08
  • Angular.js前台传list数组由后台spring MVC接收数组示例代码

    Angular.js前台传list数组由后台spring MVC接收数组示例代码

    这篇文章主要给大家介绍了关于Angular.js前台传list数组之后,由后台spring MVC接收数组的相关资料,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编来一起学习学习吧。
    2017-07-07
  • AngularJs每天学习之总体介绍

    AngularJs每天学习之总体介绍

    这篇文章主要为大家详细介绍了Angularjs总体介绍及数据绑定部分内容,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • angularjs 中$apply,$digest,$watch详解

    angularjs 中$apply,$digest,$watch详解

    这篇文章主要介绍了angularjs 中$apply,$digest,$watch详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • angular中的cookie读写方法

    angular中的cookie读写方法

    本篇文章主要介绍了angular中的cookie读写方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • AngularJS入门之动画

    AngularJS入门之动画

    AngularJS中ngAnimate模块支持动画效果,但是ngAnimate模块并未包含在AngularJS核心库中,因此需要使用ngAnimate需要在定义Module时声明对其的引用。下面通过本文我们来看看AngularJS动画的详细介绍。
    2016-07-07
  • angular实现商品筛选功能

    angular实现商品筛选功能

    这篇文章主要为大家详细介绍了angular实现商品筛选功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Angular设置别名alias的方法

    Angular设置别名alias的方法

    这篇文章主要介绍了Angular设置别名alias及打包命令的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11

最新评论