angularjs - AngularJS 转换到抽象状态

Question

我正在开发一个使用 AngularJS 构建的应用程序，它有两种不同的状态：

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("/");

})

Answer 1

我和你有同样的问题，这是一篇关于抽象状态的帖子：angularjs ui-router default child state and ui-sref

它解释了为什么你不能直接访问抽象状态

希望能帮助到你。

Answer 2

我已将 $location 服务添加到“介绍”页面的控制器中，并使用以下内容转换到适用于我的应用程序状态。

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

menu.html 被加载并导航到播放列表。

Answer 3

在服务中：

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

或在模板中（$state必须在本地或全局中可用$scope）：

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