Я пытался использовать типы параметров с ui-router и не могу понять их правильно.
$stateProvider.state({
name: 'home.foo',
url: '/foo/{isBar:bool}',
controller: function() { },
templateUrl: 'foo.html'
});
Я ожидаю, что я смогу перейти в это состояние следующим образом:
$state.go(home.foo, { isBar: false })
Или
ui-sref="home.foo({ isBar: false })"
Однако в результирующем $stateParams вы увидите isBar: true
Глядя на то, как пишется тип параметра 'bool' Я полагаю, что true/false должно быть закодировано как 0/1 в URL-адресе, но этого не происходит. Если использовать 0/1 в параметрах для $state.go, тогда он работает и декодируется как false/true, но чтобы еще больше запутать проблему, это не работает при использовании ui-sref.
Надеюсь, этот плункер объяснит это лучше. Любые подсказки приветствуются!
Изменить: моя цель использования типа bool param - получить логический тип данных в $stateParams
2 ответа
Существует обновленный и работающий плункер с пользовательским типом boolean.
В случае, если мы хотели бы работать с типом типа bool, который ожидает и принимает:
true,false,0,1>
Нам просто нужно зарегистрировать наш пользовательский тип:
app.config(['$urlMatcherFactoryProvider', function($urlMatcherFactory) {
$urlMatcherFactory.type('boolean',
// our type custom type
{
name : 'boolean',
decode: function(val) { return val == true ? true : val == "true" ? true : false },
encode: function(val) { return val ? 1 : 0; },
equals: function(a, b) { return this.is(a) && a === b; },
is: function(val) { return [true,false,0,1].indexOf(val) >= 0 },
pattern: /bool|true|0|1/
})
}]);
И затем мы можем использовать это определение URL внутри любого состояния:
...
, url: '/foo/{isBar:boolean}'
...
ПРИМЕЧАНИЕ. Почему boolean? не bool? Поскольку bool уже зарегистрирован для 0|1, насколько я помню
Проверьте это здесь
ОРИГИНАЛ
Простое решение, работающее со "строками" в этом обновленном плункере,
... // states definitions
, url: '/foo/{isBar:(?:bool|true|0|1)}'
UI-Router безгранична ;) Наслаждайтесь ;)
boolean;) если вы хотите узнать больше, просмотрите исходный код здесь: github.com/angular-ui/ui-router/tree/master/src. Удачи с UI-маршрутизатором ;)
undefined. Например, /foo?{isBar:boolean} для предоставления false, когда фактический URL-адрес /foo без строки запроса. Я пытаюсь понять это сейчас. Насколько я проверял, undefined не совпадает с $state.includes.
Итак, покопавшись в нескольких файлах, я обнаружил, почему последние два способа (0,1) не работают в ui-sref. В строке 106 stateDirectives.js есть этот вызов: newHref = $state.href(ref.state, params, options);
Это вернет null в случае использования 1 и 0. И поскольку за приведенным выше вызовом следует следующее:
if (newHref === null) {
nav = false;
return false;
}
Ссылка никогда не делается. Теперь возвращается причина null. state.href вызывает urlRouter.href. Внутри это вызов для проверки параметров. Проверка такова: result = result && (isOptional || !!param.type.is(val));
Когда вы посмотрите на функцию is для bool (is: function(val) { return val === true || val === false; }), вы увидите, почему это не работает, поскольку 1 и 0 не равны true или false. На мой взгляд, он также должен проверять 1 и 0, если это то, во что он в конечном итоге преобразуется, но, по крайней мере, теперь вы знаете, почему он ведет себя именно так.
Похожие вопросы
Связанные вопросы
Новые вопросы
angularjs
Используйте для вопросов об AngularJS (1.x), JavaScript-фреймворке с открытым исходным кодом. НЕ используйте этот тег для Angular 2 или более поздних версий; вместо этого используйте тег [angular].