Как передавать параметры с помощью ui-sref в ui-router к controllerу

Мне нужно передать и получить два параметра в состояние, в котором я хочу перейти на использование ui-sref ui-router.

Что-то вроде использования приведенной ниже ссылки для перехода состояния на home с параметрами foo и bar :

 Go to home state with foo and bar parameters

Получение значений foo и bar в controllerе:

 app.controller('SomeController', function($scope, $stateParam) { //.. var foo = $stateParam.foo; //getting fooVal var bar = $stateParam.bar; //getting barVal //.. });

Я получаю undefined для $stateParam в controllerе.

Может ли кто-нибудь помочь мне понять, как это сделать?

Редактировать:

 .state('home', { url: '/', views: { '': { templateUrl: 'home.html', controller: 'MainRootCtrl' }, 'A@home': { templateUrl: 'a.html', controller: 'MainCtrl' }, 'B@home': { templateUrl: 'b.html', controller: 'SomeController' } } });

Я создал пример, чтобы показать, как это сделать. Обновленное определение state будет:

  $stateProvider .state('home', { url: '/:foo?bar', views: { '': { templateUrl: 'tpl.home.html', controller: 'MainRootCtrl' }, ... }

И это будет controller:

 .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

Эти две ссылки будут правильно передавать аргументы в controller:

Кроме того, controller использует $stateParams вместо $stateParam .

Ссылка на документ:

Параметры URL

Вы можете проверить это здесь

`params : {}`

Также есть новые , более детализированные параметры настройки params : {} . Как мы уже видели, мы можем объявлять параметры как часть url . Но с params : {} configuration – мы можем расширить это определение или даже ввести параметры, которые не являются частью 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, значение параметра будет рассматриваться как массив значений.
squash – {bool | string =}: squash настраивает, как значение параметра по умолчанию представлено в URL, когда текущее значение параметра совпадает с значением по умолчанию.

Мы можем назвать эти параметры таким образом:

 // hidden param cannot be passed via url  // default foo is skipped

Проверьте это в действии здесь

Вам необязательно иметь параметры внутри URL.

Например, с:

 $stateProvider .state('home', { url: '/', views: { '': { templateUrl: 'home.html', controller: 'MainRootCtrl' }, }, params: { foo: null, bar: null } })

Вы сможете отправлять параметры в состояние, используя:

 $state.go('home', {foo: true, bar: 1}); // or Go!

Конечно, если вы перезагрузите страницу один раз в home состоянии, вы потеряете параметры состояния, поскольку они нигде не хранятся.

Полное описание этого поведения state(name, stateConfig) здесь , в строке params в разделе state(name, stateConfig) .

Вы просто $stateParam , это должно быть $stateParams (с s). Вот почему вы получаете неопределенный;)