[转]ionic $state.go passed $stateParams
本文转自:http://stackoverflow.com/questions/19516771/state-go-toparams-not-passed-to-stateparams
If you want to pass non-URL state, then you must not use url when setting up your state. I found the answer on a PR and did some monkeying around to better understand.
$stateProvider.state('toState', {
templateUrl:'wokka.html',
controller:'stateController',
params: {
'referer': 'some default',
'param2': 'some default',
'etc': 'some default'
}
});
Then you can navigate to it like so:
$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });
Or:
var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);
And in HTML thusly:
<a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies">{{ thingy.referer }}</a>
This use case is completely uncovered in the documentation, but I think it's a powerful means on transitioning state without using URLs.
The Nathan Matthews's solution did not work for me but it is totally correct but there is little point to reaching a workaround:
The key point is: Type of defined parameters and toParamas of $state.go should be same array or object on both sides of state transition.
For example when you define a params in a state as follows you means params is array because of using "[]":
$stateProvider
.state('home', {
templateUrl: 'home',
controller: 'homeController'
})
.state('view', {
templateUrl: 'overview',
params: ['index', 'anotherKey'],
controller: 'overviewController'
})
So also you should pass toParams as array like this:
params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)
And you can access them via $stateParams as array like this:
app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams[0];
var anotherKey = $stateParams[1];
});
Better solution is using object instead of array in both sides:
$stateProvider
.state('home', {
templateUrl: 'home',
controller: 'homeController'
})
.state('view', {
templateUrl: 'overview',
params: {'index': null, 'anotherKey': null},
controller: 'overviewController'
})
I replaced [] with {} in params definition. For passing toParams to $state.go also you should using object instead of array:
$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })
then you can access them via $stateParams easily:
app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
});
[转]ionic $state.go passed $stateParams的更多相关文章
- --@ui-router——$state服务原版详解
$state service in module ui.router.state Description $state service is responsible for representing ...
- AngularJS的增删改查、state嵌套案例,不涉及服务端
本篇实践一个案例,大致是:左边有导航菜单,右边显示列表,并可对列表项编辑或删除,也可添加新的列表项.借此,可体会到:如何组织可扩展的AngualrJS文件结构,如何点击左侧菜单项右侧显示相应内容,an ...
- $stateProvider
在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. 12345 $stateProvid ...
- angularJs模块ui-router之路由控制
在你的应用中大多数状态都有与其相关联的 url,路由控制不是设计完成 state 之后的事后想法,而是开始开发时就应该考虑的问题. 这里是如何设置一个基本url. $stateProvider .st ...
- AngularJs ui-router 路由的简单介绍
之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Angular有了自带的路由,我们还需要用ui-router ...
- ui router 介绍
1. 路由规则 rap框架页面路由基于ui-router实现 1.1 ui-router 一个基本的路由状态如下所示: 路由配置: $stateProvider .state('po',{ url:' ...
- 【原创】ui.router源码解析
Angular系列文章之angular路由 路由(route),几乎所有的MVC(VM)框架都应该具有的特性,因为它是前端构建单页面应用(SPA)必不可少的组成部分. 那么,对于angular而言,它 ...
- SPA UI-router
------------------------------------------------------------------------------------ SPA SPA(单页面应用): ...
- AngularJs ui-router 路由的介绍
AngularJs ui-router 路由介绍 野兽之前有写过一篇关于Angular自带的路由:ngRoute.今天来说说Angular的第三方路由:ui-router.那么有人就会问:为什么Ang ...
随机推荐
- asp.net mvc UpdateModel 更新对象后出现null
在用asp.net mvc 4.0做项目的时候遇到的这种情况 在填写表单的时候,有一些表单没有填写,留空,然后直接post 提交表单,action中用UpdateModel 来更新model, 结果发 ...
- ActiveReports 报表应用教程 (4)---分栏报表
在 ActiveReports 中可以实现分栏报表布局样式,可以设置横向分栏.纵向分栏,同时进行分栏和分组设置,统计分栏分组的小计.合计等.在商业报表系统中常见的分栏报表有商品标签.员工工卡.条码打印 ...
- Javaweb上下文监听者ServletContextListener
一个监听类,不是一个servlet或JSP,它能监听ServletContext一生中的两个关键事件:初始化(创建)和撤销.这个类实现了javax.servlet.ServletContextList ...
- mysql awr v1.0.2发布
改进说明: 1.新增监控Mysql实例通过web控制台http://ip:port/hosts.html进行,无需更改mysql-jdbc.properties配置文件和spring-servlet. ...
- android onNewIntent
在Android应用程序开发的时候,从一个Activity启动另一个Activity并传递一些数据到新的Activity上非常简单,但是当您需要让后台运行的Activity回到前台并传递一些数据可能就 ...
- Linux 学习手记(4):Linux系统常用Shell命令
日期时间 date命令:显示当前时间日期 date -u # 显示格林威治(UTC)事件 date +%Y-%m-%d # 格式显示日期 date -s '20:25:25' # 修改系统时间,需要使 ...
- ng-click
使用ng-clcik代码是发现其内的a标签失效: 于是测试下,发现绑定在document上的click事件在点击ng-click绑定的元素上也会失效: <div ng-click="c ...
- Sharepoint学习笔记—习题系列--70-573习题解析 -(Q131-Q132)
Question 131You create a SharePoint site by using the Document Center site template.You need to ensu ...
- 在Android Studio中用Gradle添加Robolectric
我们用Robolectric测试的话需要在gradle中进行配置,国内的详细教程太过简易,而且很多是低版本下的配置方案.所以经过本人的仔细摸索,找到了现在高版本中的配置方案,主要还是参考了官网的配置教 ...
- iOS 学习 - 8 TableViewCell 自适应高度
思路:计算文字的高度,存进数组 加注:存在中文,需要加一行文字的高度,也就是 font 主要代码 #pragma mark -- UITableViewDelegate - (CGFloat)tabl ...