ionic 路由使用$state.go父页面向子页面传递参数
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等服务。
声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。
- 上一篇: Java代码优化必看
- 下一篇: 浅谈程序优化