Как передать параметры с помощью 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'
}
}

});
704   3  

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&amp;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

    Ничего не найдено.