Question

我正在处理使用AngularJS构建的应用程序，该应用程序有两种不同的状态：

App简介向导
应用页面（包含导航模板和嵌套视图）

我想在第一次有人访问应用程序时默认为状态1，完成向导后，继续执行App页面，状态2.

我的应用程序＆＃34; state（状态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服务添加到＆＃34; intro＆＃34;的控制器中。页面并使用以下内容转换到适合我的应用程序状态。

$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>

AngularJS过渡到抽象状态

3 个答案: