web-dev-qa-db-ja.com

angularjs ui-routerのデフォルトの子の状態とui-sref

私のui-router状態プロバイダーに次の状態があります。

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

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

これは、ui-routerのドキュメントで説明されている here のように、デフォルトの子の状態を持つためのベストプラクティスに従います。

ただし、ui-srefなどの<a ui-sref="parent">Link</a>で親を参照しているドキュメントのどこかにリンクを含めると、抽象状態に移行できないことを示すエラーが常に表示されます。アドレスバーに手動でURLを入力してEnterキーを押すと、すべてが正常に機能します。

関連プランカー： http://plnkr.co/edit/d3Z0tOwC3VCTPqGiB0df?p=preview

ui-srefをデフォルトの子の状態と組み合わせるにはどうすればよいですか？

angularjsangular-uiangular-ui-router
16
Robin

抽象状態を直接ターゲットにすることはできません。彼らは主に子供国家を築くための基盤として機能します。 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

28
Chris Preston

$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に似たディレクティブを作成しますが、抽象状態の制限はありません。

1
Zane Hooper