Вопросы Теги

$ stateProvider, передающее значение из html в угловые маршруты [дубликат]

В то время как обещания и обратные вызовы хорошо работают во многих ситуациях, боль в задней части выражает нечто вроде: 

if (!name) {
  name = async1();
}
async2(name);

. В итоге вы пройдете через async1; проверьте, не определено ли name или нет, и соответственно вызовите обратный вызов. 

async1(name, callback) {
  if (name)
    callback(name)
  else {
    doSomething(callback)
  }
}

async1(name, async2)

Хотя в в порядке хорошо , это раздражает, когда у вас много подобных случаев и обработка ошибок.

Fibers помогает в решении проблемы. 

var Fiber = require('fibers')

function async1(container) {
  var current = Fiber.current
  var result
  doSomething(function(name) {
    result = name
    fiber.run()
  })
  Fiber.yield()
  return result
}

Fiber(function() {
  var name
  if (!name) {
    name = async1()
  }
  async2(name)
  // Make any number of async calls from here
}

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

344
задан Radim Köhler 20 May 2015 в 05:07
поделиться

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, значение параметра будет рассматриваться как массив значений.
  • squash - {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]})">

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

505
ответ дан Radim Köhler 27 August 2018 в 03:48
поделиться

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

26
ответ дан felixfbecker 27 August 2018 в 03:48
поделиться

Вам необязательно иметь параметры внутри 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).

101
ответ дан Paul Mougel 27 August 2018 в 03:48
поделиться
Другие вопросы по тегам:

Похожие вопросы: