ionic 路由使用$state.go父页面向子页面传递参数

hunannanhu · · 5073 次点击 · · 开始浏览    
这是一个创建于 的文章,其中的信息可能已经有所发展或是发生改变。

1.父页面的路由配置

.state('tab.article', {
	  url: '/article',
	  nativeTransitions: {
		type: "fade"
	  },
	  views: {
		'tab-article': {
		  templateUrl: 'templates/article/article.html',
		  controller: 'ArticleController'
		}
	  }
	})
2.子页面的路由配置

.state('tab.article_details', {
	  url: '/article_details?articleDetailsUrl',
	  views: {
		'tab-article': {
		  templateUrl: 'templates/article/article_details.html',
		  controller: 'ArticleDetailsController'
		}
	  }
	})
3.父页面传递参数过程
/**
	* @param url路径
	*/
	//下面的点击事件是放在父页面controller中
	$scope.itemClicked = function(url){
	//url是从article.html页面中传递过来的参数;第一个参数是路由的路径,第二个参数是给属性赋值的值;
	$state.go('tab.article_details',{articleDetailsUrl:url});
	}
4.父页面传递参数来源
        //下面的标签是放置于父页面中
	<li ng-click="itemClicked(url)">点击获取url</li>
5.子页面获取参数
    //下面的js是放在子页面controller中,以下能获取父页面传递过来的url
    var articleDetailsUrl = $stateParams.articleDetailsUrl;

如果由列表页面跳到详情页面,传递的参数过多,也可使用这种办法进行传递,采用json字符串进行传递,到目标界面进行解析就可以了:

6.父页面(列表页面)的html:

<ion-item ng-repeat="listdata in listDatas ng-click="listDetailsClick(listdata)">

</ion-item>

7.父页面(列表页面)的controller:

$scope.listDetailsClick = function (listdata) {
        //将对象转化为字符串
        var listDataAll = angular.toJson(listdata);
        $state.go("listDetails", {id:listDataAll});
      };

8.子页面(详情页面)的controller:

//将字符串转化为对象
$scope.listData = angular.fromJson($stateParams.id);

9.路由配置:

.state('listDetails', {
          url: '/listDetails/:id',
          templateUrl: 'templates/list/listDetails/listDetails.html',
          controller: 'ListDetailsController'
        });

注意:在实际过程中,需要依赖注入$state、$stateParams等服务。





有疑问加站长微信联系(非本文作者)

本文来自:CSDN博客

感谢作者:hunannanhu

查看原文:ionic 路由使用$state.go父页面向子页面传递参数

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

5073 次点击  
加入收藏 微博
暂无回复
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传