blocks|key|212287|text|我所要做的就是向url状态定义中添加一个参数，如下所示|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212288|url:+'/toState?referer'|code-block|syntax|javascript|212289|多！|212290|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

All I had to do was add a parameter to the url state definition like so

<pre><code>url: '/toState?referer'
</code></pre>

Doh!

blocks|key|212345|text|如果您想传递非URL状态，则在设置state时不能使用url。我在公关上发现了the+answer，为了更好地理解它，我做了一些胡闹。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|212346|$stateProvider.state('toState',+{
++templateUrl:'wokka.html',
++controller:'stateController',
++params:+{
++++'referer':+'some+default',+
++++'param2':+'some+default',+
++++'etc':+'some+default'
++}
});|code-block|syntax|javascript|212347|然后，您可以像这样导航到它：|212348|$state.go('toState',+{+'referer':'jimbob',+'param2':37,+'etc':'bluebell'+});|212349|或者：|212350|var+result+=+{+referer:'jimbob',+param2:37,+etc:'bluebell'+};
$state.go('toState',+result);|212351|因此，在HTML中：|212352|<a+ui-sref="toState(thingy)"+class="list-group-item"+ng-repeat="thingy+in+thingies">{{+thingy.referer+}}</a>|212353|这个用例在文档中完全没有涉及，但我认为这是一种在不使用URL的情况下转换状态的强大方法。|212354|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular-ui/ui-router/issues/928#issuecomment-37686472^0|H|5|R|3|13|A|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|F|3|G|5|H|7|1E|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1F|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|1H|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1I|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1J|8|@]|D|@]|E|$]]|$1|U|3|V|5|H|7|1K|8|@]|D|@]|E|$I|J]]|$1|W|3|X|5|6|7|1L|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

If you want to pass non-URL state, then you must not use <code>url</code> when setting up your <code>state</code>. I found <a href="https://github.com/angular-ui/ui-router/issues/928#issuecomment-37686472" rel="noreferrer">the answer</a> on a PR and did some monkeying around to better understand.

<pre><code>$stateProvider.state('toState', {
 templateUrl:'wokka.html',
 controller:'stateController',
 params: {
 'referer': 'some default', 
 'param2': 'some default', 
 'etc': 'some default'
 }
});
</code></pre>

Then you can navigate to it like so:

<pre><code>$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });
</code></pre>

Or:

<pre><code>var result = { referer:'jimbob', param2:37, etc:'bluebell' };
$state.go('toState', result);
</code></pre>

And in HTML thusly:

<pre><code>&lt;a ui-sref="toState(thingy)" class="list-group-item" ng-repeat="thingy in thingies"&gt;{{ thingy.referer }}&lt;/a&gt;
</code></pre>

This use case is completely uncovered in the documentation, but I think it's a powerful means on transitioning state without using URLs.

blocks|key|212432|text|我花了很多时间与爱奥尼亚/Angular的$state+&$stateParams抗争；|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212433|要使用$state.go()和$stateParams，您必须设置某些内容，并且不能设置其他参数。|212434|在我的app.config()中，我包含了$stateProvider，并在其中定义了几种状态：|212435|$stateProvider
++++.state('home',+{
++++++++templateUrl:+'home',
++++++++controller:++'homeController'
++++})
++++.state('view',+{
++++++++templateUrl:+'overview',
++++++++params:++++++['index',+'anotherKey'],
++++++++controller:++'overviewController'
++++})|code-block|syntax|javascript|212436|params键尤其重要。另外，请注意这里没有url密钥...使用stateParams和URL不能混合使用。它们是相互排斥的。|offset|length|style|CODE|212437|在$state.go()调用中，将其定义为：|212438|$state.go('view',+{+'index':+123,+'anotherKey':+'This+is+a+test'+})|212439|仅当index和anotherKey+$stateParams变量首次列在$stateController+params定义键中时，才会填充它们。|212440|在控制器中，包括$stateParams，如图所示：|212441|app.controller('overviewController',+function($scope,+$stateParams)+{
++++var+index+=+$stateParams.index;
++++var+anotherKey+=+$stateParams.anotherKey;
});|212442|传递的变量应该是可用的！|212443|entityMap^0|0|0|0|0|0|6|M|3|0|0|0|2|5|8|A|1I|6|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|15|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|18|8|@$M|19|N|1A|O|P]|$M|1B|N|1C|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|H|7|1E|8|@]|9|@]|A|$I|J]]|$1|U|3|V|5|6|7|1F|8|@$M|1G|N|1H|O|P]|$M|1I|N|1J|O|P]|$M|1K|N|1L|O|P]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|H|7|1N|8|@]|9|@]|A|$I|J]]|$1|10|3|11|5|6|7|1O|8|@]|9|@]|A|$]]|$1|12|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|13|$]]

I've spent a good deal of time fighting with Ionic / Angular's $state &amp; $stateParams;

To utilize $state.go() and $stateParams you must have certain things setup and other parameters must not be present.

In my app.config() I've included $stateProvider and defined within it several states:

<pre><code>$stateProvider
 .state('home', {
 templateUrl: 'home',
 controller: 'homeController'
 })
 .state('view', {
 templateUrl: 'overview',
 params: ['index', 'anotherKey'],
 controller: 'overviewController'
 })
</code></pre>

The <code>params</code> key is especially important. As well, notice there are NO <code>url</code> keys present... utilizing stateParams and URLs do NOT mix. They are mutually exclusive to each other.

In the $state.go() call, define it as such:

<pre><code>$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })
</code></pre>

The <code>index</code> and <code>anotherKey</code> $stateParams variables will ONLY be populated if they are first listed in the $stateController <code>params</code> defining key.

Within the controller, include $stateParams as illustrated:

<pre><code>app.controller('overviewController', function($scope, $stateParams) {
 var index = $stateParams.index;
 var anotherKey = $stateParams.anotherKey;
});
</code></pre>

The passed variables should be available!

blocks|key|212516|text|我们得到的具有两个参数的状态的解决方案正在改变：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212517|.state('somestate',+{
++url:+'/somestate',
++views:+{...}
}|code-block|syntax|javascript|212518|至|212519|.state('somestate',+{
++url:+'/somestate?id=:&sub=:',
++views:+{...}
}|212520|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

The solution we came to having a state that took 2 parameters was changing:

<pre><code>.state('somestate', {
 url: '/somestate',
 views: {...}
}
</code></pre>

to

<pre><code>.state('somestate', {
 url: '/somestate?id=:&amp;sub=:',
 views: {...}
}
</code></pre>

blocks|key|212595|text|不确定它是否能与ui-router+v0.2.0的AngularJS+v1.2.0-rc.2一起工作。我已经在AngularJS+v1.3.14和ui-router+v0.2.13上测试了这个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212596|我只是意识到没有必要像gwhn推荐的那样在URL中传递参数。|212597|只需在状态定义中添加带有默认值的参数即可。您的州仍然可以有URL值。|212598|$stateProvider.state('state1',+{
++++url+:+'/url',
++++templateUrl+:+"new.html",
++++controller+:+'TestController',
++++params:+{new_param:+null}
});|code-block|syntax|javascript|212599|并将该参数添加到$state.go()|offset|length|style|CODE|212600|$state.go('state1',{new_param:+"Going+places!"});|212601|entityMap^0|0|0|0|0|8|B|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|Y|8|@$M|Z|N|10|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

Not sure if it will work with AngularJS v1.2.0-rc.2 with ui-router v0.2.0.
I have tested this solution on AngularJS v1.3.14 with ui-router v0.2.13.

I just realize that is not necessary to pass the parameter in the URL as gwhn recommends.

Just add your parameters with a default value on your state definition.
Your state can still have an Url value.

<pre><code>$stateProvider.state('state1', {
 url : '/url',
 templateUrl : "new.html",
 controller : 'TestController',
 params: {new_param: null}
});
</code></pre>

and add the param to <code>$state.go()</code>

<pre><code>$state.go('state1',{new_param: "Going places!"});
</code></pre>

blocks|key|212714|text|在我的例子中，我尝试了这里给出的所有选项，但没有一个能正常工作(angular+1.3.13、ionic+1.0.0、angular-ui-router+0.2.13)。解决方案是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|212715|.state('tab.friends',+{
++++++url:+'/friends/:param1/:param2',
++++++views:+{
++++++++'tab-friends':+{
++++++++++templateUrl:+'templates/tab-friends.html',
++++++++++controller:+'FriendsCtrl'
++++++++}
++++++}
++++})|code-block|syntax|javascript|212716|在state.go中：|212717|$state.go('tab.friends',+{param1+:+val1,+param2+:+val2});|212718|干杯|212719|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

In my case I tried with all the options given here, but no one was working properly (angular 1.3.13, ionic 1.0.0, angular-ui-router 0.2.13). The solution was:

<pre><code>.state('tab.friends', {
 url: '/friends/:param1/:param2',
 views: {
 'tab-friends': {
 templateUrl: 'templates/tab-friends.html',
 controller: 'FriendsCtrl'
 }
 }
 })
</code></pre>

and in the state.go:

<pre><code>$state.go('tab.friends', {param1 : val1, param2 : val2});
</code></pre>

Cheers

blocks|key|212814|text|如果这是您想要传递的查询参数，如下所示：/toState?referer=current_user|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|212815|然后你需要这样描述你的状态：|212816|$stateProvider.state('toState',+{
++url:'toState?referer',
++views:{'...'}
});|code-block|syntax|javascript|212817|来源：https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters|212818|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters^0|K|T|0|0|0|3|21|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|O|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

If this is a query parameter that you want to pass like this:
<code>
/toState?referer=current_user
</code>

then you need to describe your state like this:

<pre><code>$stateProvider.state('toState', {
 url:'toState?referer',
 views:{'...'}
});
</code></pre>

source: <a href="https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters" rel="nofollow">https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters</a>

blocks|key|212928|text|尝试使用reload:+true|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|212929|我在很长一段时间内都不知道发生了什么--结果证明我是在自欺欺人。如果您确定写入的内容是正确的，并且您将使用相同的状态，请尝试reload:+true|212930|.state('status.item',+{
++++url:+'/:id',
++++views:+{...}
}

$state.go('status.item',+{+id:+$scope.id+},+{+reload:+true+});|code-block|syntax|javascript|212931|希望这能节省你的时间！|212932|entityMap^0|4|C|0|1Q|C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<h2>Try With <code>reload: true</code>?</h2>

Couldn't figure out what was going on for the longest time -- turns out I was fooling myself. If you're certain that things are written correctly and you will to use the same state, try <code>reload: true</code>:

<pre><code>.state('status.item', {
 url: '/:id',
 views: {...}
}

$state.go('status.item', { id: $scope.id }, { reload: true });
</code></pre>

Hope this saves you time!

blocks|key|213002|text|在我的父/子状态的情况下。父状态必须知道在子状态中声明的所有参数|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213003|++++++++.state('full',+{
++++++++++++url:+'/full',
++++++++++++templateUrl:+'js/content/templates/FullReadView.html',
++++++++++++params:+{+opmlFeed:null,+source:null+},
++++++++++++controller:+'FullReadCtrl'
++++++++})
++++++++.state('full.readFeed',+{
++++++++++++url:+'/readFeed',
++++++++++++views:+{
++++++++++++++++'full':+{
++++++++++++++++++++templateUrl:+'js/content/templates/ReadFeedView.html',
++++++++++++++++++++params:+{+opmlFeed:null,+source:null+},
++++++++++++++++++++controller:+'ReadFeedCtrl'
++++++++++++++++}
++++++++++++}
++++++++})|code-block|syntax|javascript|213004|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

And in my case of a parent/child state. all the parameters declared in child state has to be known by the parent state

<pre><code> .state('full', {
 url: '/full',
 templateUrl: 'js/content/templates/FullReadView.html',
 params: { opmlFeed:null, source:null },
 controller: 'FullReadCtrl'
 })
 .state('full.readFeed', {
 url: '/readFeed',
 views: {
 'full': {
 templateUrl: 'js/content/templates/ReadFeedView.html',
 params: { opmlFeed:null, source:null },
 controller: 'ReadFeedCtrl'
 }
 }
 })
</code></pre>

blocks|key|213090|text|您在router.js中的定义如下|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213091|$stateProvider.state('users',+{
++++url:+'/users',
++++controller:+'UsersCtrl',
++++params:+{
++++++++obj:+null
++++}
})|code-block|syntax|javascript|213092|您的控制器需要添加$stateParams。|213093|function+UserCtrl($stateParams)+{
++++console.log($stateParams);
}|213094|您可以通过参数发送对象，如下所示。|213095|$state.go('users',+{obj:yourObj});|213096|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Your define following in router.js

<pre><code>$stateProvider.state('users', {
 url: '/users',
 controller: 'UsersCtrl',
 params: {
 obj: null
 }
})
</code></pre>

Your controller need add $stateParams.

<pre><code>function UserCtrl($stateParams) {
 console.log($stateParams);
}
</code></pre>

You can send an object by parameter as follows.

<pre><code>$state.go('users', {obj:yourObj});
</code></pre>

I am using AngularJS v1.2.0-rc.2 with ui-router v0.2.0. I want to pass the referrer state to another state so I use the <code>toParams</code> of <code>$state.go</code> like so:

<pre><code>$state.go('toState', {referer: $state.current.name});
</code></pre>

According to the <a href="https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options">docs</a>, this should populate the <code>$stateParams</code> on the <code>toState</code> controller, but it is <code>undefined</code>. What am I missing?

I've created a plunk to demonstrate: 

<a href="http://plnkr.co/edit/ywEcG1">http://plnkr.co/edit/ywEcG1</a>

How to send and retrieve parameters using $state.go toParams and $stateParams?

我使用的是AngularJS v1.2.0-rc.2和ui-router v0.2.0。我想将引用状态传递给另一个状态，所以我使用$state.go的toParams，如下所示：$state.go('toState', {referer: $state.current.name});根据，这应该填充toState控制器...

问如何使用$state.go toParams和$stateParams发送和检索参数？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用$state.go toParams和$stateParams发送和检索参数？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用$state.go toParams和$stateParams发送和检索参数？
EN