Angularjs ui-router default child state и ui-sref

У меня в моем провайдере состояния ui-router есть следующие состояния:

$urlRouterProvider.when('/parent', '/parent/child');
$stateProvider.state('parent', {
     url: "/parent",
     abstract: true
});

$stateProvider.state('parent.child', {
     url: "/child"
});

Что следует за наилучшей практикой наличия дочернего состояния по умолчанию, как описано здесь в документах ui-router.

Однако, когда я теперь включаю ссылку в мой документ где-то, ссылаясь на родителя с ui-sref, например <a ui-sref="parent">Link</a>, я всегда получаю сообщение об ошибке, что я не могу перейти к абстрактному состоянию. Когда я вводим URL-адрес вручную в адресную строку и нажимаю Enter, все работает нормально.

Связанный Plunker: http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

Как я могу объединить ui-sref с дочерними состояниями по умолчанию?

Ответ 1

абстрактные состояния не могут быть нацелены напрямую. Они в основном служат основой для создания детских состояний. Единственная причина, по которой он отлично работает с URL-адресом, заключается в том, что /parent попадает в файл .when

Это означает, что при вызове дочернего элемента, использующего

<a ui-sref="parent.child">

ребенок внутри родителя загружается, то есть родитель будет загружен как слой вокруг него.

Итак, никогда не нацеливайтесь на абстрактное состояние. Это похоже на дверь в дверную раму. Вы можете открывать и взаимодействовать только с дверью (ребенком), но никогда не с кадром (родителем) напрямую. Однако, когда вы взаимодействуете с дверью, дверь и рама являются частью системы, которая загружается.

Вы можете дать ребенку пустой URL-адрес, чтобы он не добавлял ничего к URL-адресу родительского состояния и затем будет загружен.

См. здесь для получения дополнительной информации: https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views#abstract-states

Ответ 2

Если вы хотите использовать $state удобную структуру именования для абстрактных состояний, вы можете использовать это в службе:

$location.path(
    $state.href('app.some.abstract.state', { some: 'params' })
);

Или это в шаблоне ($state должно быть доступно в локальном или глобальном $scope):

<a ng-href="{{$state.href('app.some.abstract.state', { some: 'params' })}}">...</a>

Если бы я регулярно занимался этим, я бы создал для него директиву, подобную ui-sref, за вычетом ограничения абстрактного состояния.