Как передать параметры с помощью ui-sref в ui-router контроллеру
мне нужно передать и получить два параметра в состояние, которое я хочу перейти к использованию ui-sref пользовательский интерфейс-маршрутизатор.
что-то вроде использования ссылки ниже для перехода состояния в home С foo и bar параметры:
<a ui-sref="home({foo: 'fooVal', bar: 'barVal'})">Go to home state with foo and bar parameters </a>
прием foo и bar значения в контроллере:
app.controller('SomeController', function($scope, $stateParam) {
//..
var foo = $stateParam.foo; //getting fooVal
var bar = $stateParam.bar; //getting barVal
//..
});
Я undefined на $stateParam в контроллере.
кто-нибудь может помочь мне понять, как его получить готово?
Edit:
.state('home', {
url: '/',
views: {
'': {
templateUrl: 'home.html',
controller: 'MainRootCtrl'
},
'A@home': {
templateUrl: 'a.html',
controller: 'MainCtrl'
},
'B@home': {
templateUrl: 'b.html',
controller: 'SomeController'
}
}
});
3 ответов:
я создал пример чтобы показать, как. Обновлено
stateопределение:$stateProvider .state('home', { url: '/:foo?bar', views: { '': { templateUrl: 'tpl.home.html', controller: 'MainRootCtrl' }, ... }и это будет контроллер:
.controller('MainRootCtrl', function($scope, $state, $stateParams) { //.. var foo = $stateParams.foo; //getting fooVal var bar = $stateParams.bar; //getting barVal //.. $scope.state = $state.current $scope.params = $stateParams; })что мы можем видеть, так это то, что государственный дом теперь имеет url-адрес, определенный как:
url: '/:foo?bar',что означает, что параметры в url ожидаются как
/fooVal?bar=barValueэти две ссылки будут правильно передавать аргументы в контроллер:
<a ui-sref="home({foo: 'fooVal1', bar: 'barVal1'})"> <a ui-sref="home({foo: 'fooVal2', bar: 'barVal2'})">кроме того, контроллер делает потребляйте
$stateParamsвместо$stateParam.ссылка на doc:
вы можете проверить это здесь
params : {}есть еще новая, более точный параметр
params : {}. Как мы уже видели, мы можем объявить параметры как частьurl. Но сparams : {}конфигурация - мы можем расширить это определение или даже введите параметры, которые не являются частью url:.state('other', { url: '/other/:foo?bar', params: { // here we define default value for foo // we also set squash to false, to force injecting // even the default value into url foo: { value: 'defaultValue', squash: false, }, // this parameter is now array // we can pass more items, and expect them as [] bar : { array : true, }, // this param is not part of url // it could be passed with $state.go or ui-sref hiddenParam: 'YES', }, ...настройки, доступные для параметров, описаны в документации $stateProvider
ниже просто выдержка
- value - {object / function=} задает значение по умолчанию для этого параметра. Это неявно устанавливает этот параметр как необязательный...
- array - {boolean=}: (по умолчанию: false) если true, то параметр значение будет рассматриваться как массив значений.
- сквош - {bool / string=}: squash настраивает, как значение параметра по умолчанию представлено в URL, когда текущее значение параметра совпадает со значением по умолчанию.
мы можем назвать эти параметры следующим образом:
// hidden param cannot be passed via url <a href="#/other/fooVal?bar=1&bar=2"> // default foo is skipped <a ui-sref="other({bar: [4,5]})">проверьте его в действии здесь
вам не обязательно иметь параметры внутри URL.
для примера:
$stateProvider .state('home', { url: '/', views: { '': { templateUrl: 'home.html', controller: 'MainRootCtrl' }, }, params: { foo: null, bar: null } })вы сможете отправлять параметры в состояние, используя либо:
$state.go('home', {foo: true, bar: 1}); // or <a ui-sref="home({foo: true, bar: 1})">Go!</a>конечно, если вы перезагрузите страницу один раз на
homeсостояние, вы потеряете параметры состояния, так как они нигде не хранятся.полное описание этого поведения задокументировано здесь, под
paramsстрокаstate(name, stateConfig)раздел.
вы просто ошиблись
$stateParam, должно быть$stateParams(С s). Вот почему вы получаете неопределенный ;)
Comments