[转]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 ...
随机推荐
- gitbook使用
第一步:安装node.js 官方网址:https://nodejs.org/en/ 运行以下命令,确认是否安装成功 node -v 第二步:安装gitbook npm install -g gitbo ...
- FreeBSD暂时用9.X系列为宜
今天尝试在FreeBSD10 上编译c代码,发现gcc被换成llvm后,环境配置需要重新学习.
- 泛函编程(24)-泛函数据类型-Monad, monadic programming
在上一节我们介绍了Monad.我们知道Monad是一个高度概括的抽象模型.好像创造Monad的目的是为了抽取各种数据类型的共性组件函数汇集成一套组件库从而避免重复编码.这些能对什么是Monad提供一个 ...
- Dev-Cpp配置OpenGL图形库(成功版本:Dev-Cpp 5.7.1 MinGW 4.8.1)
★配置前须知:Dev-Cpp自带OpenGL的使用和OpenGL简介 (附Dev-Cpp下载地址:http://sourceforge.net/projects/orwelldevcpp/?sourc ...
- [moka同学笔记]yii2.0小物件的简单使用(第二种方法)
1.在widgets/TestWidget.php中 <?php /** * Created by PhpStorm. * User: moka同学 * Date: 2016/08/05 * T ...
- PHP获取APK的包信息
这段时间太忙了,一个月没有写博客了,稍微闲下来就感觉把在开发中遇到的问题记录下来 php上传安卓apk包的时候,需要获取安卓apk包内的信息 <?php /*解析安卓apk包中的压缩XML文件, ...
- 为什么重新设计 ASP.NET?
灵活的跨平台运行时需求 早期 .NET Framework 版本一直作为单一且全面的整体进行安装,每个新版本都包含了新功能和几乎所有早期功能,而鲜有删减,这就不可避免的造成Framework的体积的增 ...
- Dom4j 锁竞争性能低下解决
在最近的项目中使用 Dom4j 解析 xml 发现性能低下,有锁竞争的情况,解决如下: SAXParserFactory factory = new org.apache.xerces.jaxp.SA ...
- SQL数据库基础(四)
聚合函数:sum,avg,max,min,count 使用方法示例: group by 分组的使用方法 分组的练习: 数学函数:ABS.ceiling.floor.power.round.sqrt. ...
- 用win下的快捷键提高工作效率
常用的快捷键: WIN+D:显示桌面,再按一次还原桌面: WIN+R:打开运行,输入命令可以执行相应操作,输入路径可以打开对应路径,输入程序名称可以打开对应程序(前提是你打开的是windows下面的程 ...