如何从登录状态导航到抽象仪表板状态? [英] How to navigate from a login state to an abstract dashboard state?

问题描述

https://plnkr.co/edit/ByatrCzdUJfAV3oc8XPq?p=preview

^在第10行上，如果您放回abstract:true键，您将看到标签视图出现在此plnkr应用程序中.

^ On line 10, if you put back in the abstract:true key you will see the tags view appear in this plnkr app.

但是我的问题是，在我的真实应用中，它不允许我使用abstract键，因为您首先从login状态开始，然后过渡到dashboard状态

However my problem is that in my real app it won't let me use the abstract key because you first start at a login state and then transition to the dashboard state.

并且抽象键允许我将其他tags状态添加为dashboard的子级.

And the abstract key allows me to add the additional tags state as a child of dashboard.

当我在那里拥有该密钥并登录我的真实应用程序时，这是我得到的错误:

When I have that key in there and I login in my real app this is the error I get:

错误:无法转换为抽象状态仪表板"

Error: Cannot transition to abstract state 'dashboard'

var dash = {
  name: 'dash',
  url: '/dash?ticker',
  // abstract: true,
  views: {
    '': { templateUrl: 'dashboard.html' },
    'tickersList@dash': {
      templateUrl: 'tickers-list.html',
      controller: 'tickersController'
    },
    'alertsList@dash': {
      templateUrl: 'alerts-list.html',
      controller: 'alertsController'
    }
  }
};

var tags = {
  name: 'dash.tags',
  url: '?ticker',
  params: {
    ticker: 'AAA'
  },
  views: {
    'tagsList@dash': {
      templateUrl: 'tags-list.html',
      controller: 'tagsController'
    }
  }
}

$stateProvider
  .state(dash)
  .state(tags);

---

真实应用

LoginController:

---

Real app

LoginController:

$state.go('dashboard')

STATE_CONSTANTS:

仪表板状态对象:

STATE_CONSTANTS:

dashboard state object:

.constant('STATE_CONSTANTS', {
  dash: {
    name: 'dashboard',
    // abstract: true,
    url: `/dashboard?ticker?start_epoch?end_epoch?timespan?group?sort?term_id_1?term_id_2?term_id_3?social?stream?links?retweets?tags_open?feed_open?chart_alerts?chart_max`,
    views: {
        '': {
            templateUrl: 'dash/dashboard_container.html',
            controller: function(UserFactory, container, user) {
                this.container = container;
                UserFactory.storeUser(user);
            },
            controllerAs: 'dc',
            bindToController: true,
            resolve: {
                user: (AuthFactory) => AuthFactory.check_login(),
                settings: (user, UserFactory) => UserFactory.settings(user),
                container: ($stateParams, TagsFactory) => TagsFactory.createTerms($stateParams)
            }
        },
        'platformHeader@dashboard': {
            templateUrl: 'headers/platform/platform_header.html',
            controller: 'PlatformCtrl',
            controllerAs: 'ph'
        },
        'timespanHeader@dashboard': {
            templateUrl: 'headers/timespan/timespan_header.html',
            controller: 'TimeHeaderCtrl',
            controllerAs: 'thc'
        },
        'tickersPanel@dashboard': {
            templateUrl: 'tickers/panel/tickers_panel.html',
            controller: 'TickersPanelCtrl',
            controllerAs: 'tikp'
        },
    },
    params: {
        ticker: '',
    },
    data: { authorizedRoles: ['All'] }
},

登录状态对象:

login: {
    name: 'login',
    url: '/login',
    templateUrl: 'auth/login.html',
    controller: 'LoginCtrl',
    data: { authorizedRoles: ['All'] }
}

dashboard.html模板

<div>
    <header>
        <div ui-view="platformHeader"></div>
        <div ui-view="timespanHeader"></div>
    </header>

    <aside>
        <!-- the headers and tickersPanel are all child states of
             dashboard state -->
        <div ui-view="tickersPanel"></div>
        <!-- tags is a seperate state from dashboard -->
        <div ui-view="tagsPanel"></div>
    </aside>
//...

app.js

$stateProvider
    .state(STATE_CONSTANTS.login)
    .state(STATE_CONSTANTS.password)
    .state(STATE_CONSTANTS.passwordreset)
    .state(STATE_CONSTANTS.settings)
    .state(STATE_CONSTANTS.settingsDefault)
    .state(STATE_CONSTANTS.settingsAlerts)
    .state(STATE_CONSTANTS.dash)

推荐答案

行为正确.您不能转换为抽象状态.看看你的例子.

The behavior is right. You cannot transit to abstract state. Look at your example from plunker.

var dash = {
  name: 'dash',
  url: '/dash?ticker'

var tags = {
  name: 'dash.tags',
  url: '?ticker',

您有一个抽象状态破折号"，而您有一个不是抽象的子状态"dash.tags".因此，您只能过渡到子状态.

You have an abstract state "dash" and you have a child state "dash.tags" which is not abstract. So you can transit only to child state.

在您的应用中，您尝试转换为不可能的抽象状态. 如果您希望具有一些具有共同行为的基本状态(父状态)，则可以使用抽象状态.您无法转换为此类状态，但是它们可以具有一些基本模板，解析功能...因此，您必须删除抽象标志或创建子状态.

In your app, you try transiting to an abstract state which is not possible. Abstract states are used if you want to have some basic state with common behavior (parent state). You cannot transit to such states but they can have some basic template, resolve functions... So, you have to remove abstract flag or create a child state.

这篇关于如何从登录状态导航到抽象仪表板状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！