如何使用 $state.go to Params 和 $stateParams 发送和检索参数？

我使用的是 AngularJS v1.2.0-rc.2和 ui-router v0.2.0。我想将引用状态传递给另一个状态，所以我使用 $state.go的 toParams，如下所示:

$state.go('toState', {referer: $state.current.name});

根据 医生，这应该填充 toState控制器上的 $stateParams，但它是 undefined。我错过了什么？

I've created a plunk to demonstrate:

Http://plnkr.co/edit/ywecg1

229793 次浏览
小开
最佳答案

我所要做的就是像这样向 url 状态定义添加一个参数

url: '/toState?referer'

Doh!

小开

如果要传递非 URL 状态，则在设置 state时不能使用 url。我在一个公关上发现了 答案，并做了一些周围的猴子更好地理解。

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

然后你可以这样导航:

$state.go('toState', { 'referer':'jimbob', 'param2':37, 'etc':'bluebell' });

或者:

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>

这个用例在文档中完全没有提到，但是我认为它是一种在不使用 URL 的情况下转换状态的强大方法。

小开

我花了很多时间与 Ionic/Angular 的 $state & $stateParams 作斗争;

要利用 $state.go ()和 $stateParams，必须设置某些东西，而且不能有其他参数。

在 app.config ()中，我包含了 $stateProvider，并在其中定义了几个状态:

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

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

在 $state.go ()调用中，将其定义为:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

只有在 $stateController params定义键中首先列出 index和 anotherKey $stateParams 变量时，它们才会被填充。

在控制器中，包含 $stateParams，如下所示:

app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
});

传递的变量应该是可用的！

小开

内森•马修斯(Nathan Matthews)的解决方案对我不起作用，但它是完全正确的，但找到一个变通方案几乎毫无意义:

关键是: Type of defined parameters and toParamas of $state.go should be same array or object on both sides of state transition.

例如，当您按照以下方式定义一个参数时，意味着参数是数组，因为使用了“[]”:

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

所以你也应该像下面这样把数组传递给 Params:

params = { 'index': 123, 'anotherKey': 'This is a test' }
paramsArr = (val for key, val of params)
$state.go('view', paramsArr)

你可以像下面这样通过 $stateParams 数组访问它们:

app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams[0];
var anotherKey = $stateParams[1];
});

更好的解决方案是在两边使用 object 而不是 array :

$stateProvider
.state('home', {
templateUrl: 'home',
controller:  'homeController'
})
.state('view', {
templateUrl: 'overview',
params:      {'index': null, 'anotherKey': null},
controller:  'overviewController'
})

在参数定义中，我用{}替换了[]。要将 toParams 传递给 $state.go，还应该使用 object 而不是 array:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' })

然后你可以通过 $stateParams 轻松访问它们:

app.controller('overviewController', function($scope, $stateParams) {
var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
});
小开

我们得到的有两个参数的状态的解决方案正在改变:

.state('somestate', {
url: '/somestate',
views: {...}
}

到

.state('somestate', {
url: '/somestate?id=:&sub=:',
views: {...}
}
小开

不确定它是否适用于 AngularJS v1.2.0-rc. 2和 ui-router v0.2.0。 我已经在 AngularJS v1.3.14和 ui-router v0.2.13上测试了这个解决方案。

我只是意识到没有必要像 gwhn 建议的那样在 URL 中传递参数。

只需在状态定义中添加具有默认值的参数即可。 您的状态仍然可以有一个 Url 值。

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

并将参数添加到 $state.go()

$state.go('state1',{new_param: "Going places!"});
小开

在我的情况下，我尝试了所有的选项，但没有人正常工作(角度1.3.13，离子1.0.0，角度 -ui-router 0.2.13)。解决办法是:

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

而且是在美国，开始:

$state.go('tab.friends', {param1 : val1, param2 : val2});

干杯

小开

如果这是一个查询参数，您希望像下面这样传递: /toState?referer=current_user

然后你需要这样描述你的状态:

$stateProvider.state('toState', {
url:'toState?referer',
views:{'...'}
});

来源: https://github.com/angular-ui/ui-router/wiki/URL-Routing#query-parameters

小开

用 reload: true试试？

很长一段时间都搞不清楚发生了什么事结果我是在自欺欺人。如果您确定所写的内容是正确的，并且您将使用相同的状态，请尝试 reload: true:

.state('status.item', {
url: '/:id',
views: {...}
}


$state.go('status.item', { id: $scope.id }, { reload: true });

希望这能节省你的时间！

小开

这个页面上的这些例子都不适合我。这是我使用的，它工作得很好。一些解决方案说不能将 url 与 $state.go ()组合在一起，但这是不对的。令人尴尬的是，您必须为 url 定义参数，并列出参数。两个人都必须出席。在 Angular 1.4.8和 UI 路由器0.2.15上进行了测试。

在 国家中，将 params 添加到状态的末尾并定义 params:

url: 'view?index&anotherKey',
params: {'index': null, 'anotherKey': null}

在你的 控制器中，你的前进方向是这样的:

$state.go('view', { 'index': 123, 'anotherKey': 'This is a test' });

然后取出参数并在 新政府的控制者中使用它们(不要忘记向控制器函数传递 $stateParams) :

var index = $stateParams.index;
var anotherKey = $stateParams.anotherKey;
console.log(anotherKey); //it works!
小开

在我的父母/子女状态的案例中。在子状态中声明的所有参数必须为父状态所知

        .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'
}
}
})
小开

我也遇到过类似的问题。经过大量的搜索、试验和测试，我最终找到了一个可行的解决方案。这是我的解决办法，对你有用。

我有两个控制器—— SearchBoxController 搜索框控制器和 StateResultController 状态结果控制器，以及一个名为 SearchQuery的参数，它将从一个视图传递，该视图有一个搜索框，显示从远程服务器获取的结果。你要这么做:

下面是使用 $state.go()调用下一个视图的控制器

.controller('searchBoxController', function ($scope, $state) {
$scope.doSearch = function(){
var searchInputRaw = $scope.searchQueryInput;
$state.go('app.searchResults', { searchQuery: searchInput });
}
})

下面是执行 $state.go()时将调用的状态:

.state('app.searchResults',
{
url: '/searchResults',
views:
{
'menuContent': { templateUrl: 'templates/searchResult.html', controller: 'stateResultController' }
},
params:
{
'searchQuery': ''
}
})

最后，与 app.searchResults状态相关联的控制器:

.controller('stateResultController', function ($scope, $state, $stateParams, $http) {
$scope.searchQueryInput = $stateParams.searchQuery;
});
小开

在 router.js 中定义 follow

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

您的控制器需要添加 $stateParams。

function UserCtrl($stateParams) {
console.log($stateParams);
}

可以按以下方式通过参数发送对象。

$state.go('users', {obj:yourObj});
小开

我试着从第一页导航到第二页，我还需要传递一些数据。

在我的 路由器 JS中，我添加了 params 姓名和 年龄:

.state('page2', {
url: '/vehicle/:source',
params: {name: null, age: null},
.................

在 第一页中，单击下一个按钮:

$state.go("page2", {name: 'Ron', age: '20'});

在 第二页中，我可以访问这些参数:

$stateParams.name
$stateParams.age

提交答案