web-dev-qa-db-ja.com

AngularJSから抽象状態への移行

AngularJSで構築された2つの異なる状態のアプリケーションに取り組んでいます。

  1. アプリ紹介ウィザード
  2. アプリページ（ナビゲーションテンプレートとネストされたビューを含む）

誰かが初めてアプリにアクセスするときはデフォルトで状態1にしたいと思います。ウィザードが完了したら、アプリページの状態2に進みます。

私の「アプリ」状態（状態2）は、ネストされたビューを持っているため、抽象的な状態です。そのため、この状態に移行できません。

.config(function($stateProvider, $urlRouterProvider) {
$stateProvider

  .state('intro', {
    url: '/',
    templateUrl: 'templates/intro.html',
    controller: 'IntroCtrl'
  })

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/menu.html',
    controller: 'AppCtrl'
  })

  .state('app.playlists', {
    url: "/playlists",
    views: {
      'menuContent' :{
        templateUrl: "templates/playlists.html",
        controller: 'PlaylistsCtrl'
      }
    }
  });

  $urlRouterProvider.otherwise("/");

})
angularjsangular-uiionic-framework
11
Mark Kamyszek

私はあなたと同じ問題を抱えています、これは抽象的な状態に関する他の投稿です： angularjs ui-router default child state and ui-sref

抽象状態に直接アクセスできない理由を明確に説明していた

この投稿に返信するのは少し遅れますが、お役に立てれば幸いです。

（ところで、これはコメントであるべきです）

14
Neaped

「イントロ」ページのコントローラーに$ locationサービスを追加し、以下を使用してアプリの状態に遷移しました。

$location.path('app/playlists');

Menu.htmlが読み込まれ、プレイリストに移動します。

3
Yang Zhang

サービス内：

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

またはテンプレート（$stateはローカルまたはグローバルで使用できる必要があります$scope）：

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