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

问题描述

Plnkr 代码:

var dash = {name: '破折号',url: '/dash?ticker',//摘要:真，意见:{'': { templateUrl: 'dashboard.html' },'tickersList@dash':{templateUrl: 'tickers-list.html',控制器:'tickersController'},'alertsList@dash':{templateUrl: 'alerts-list.html',控制器:'alertsController'}}};var 标签 = {name: 'dash.tags',url: '?ticker',参数:{股票代码:'AAA'},意见:{'标签列表@破折号':{templateUrl: 'tags-list.html',控制器:'标签控制器'}}}$stateProvider.state(破折号).state(标签)；

<小时>

真实应用

登录控制器:

$state.go('dashboard')

STATE_CONSTANTS:

仪表板状态对象:

.constant('STATE_CONSTANTS', {破折号:{name: '仪表板',//摘要:真，网址:`/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`,意见:{'':{templateUrl: 'dash/dashboard_container.html',控制器:功能(用户工厂，容器，用户){this.container = 容器；UserFactory.storeUser(user);},控制器为:'dc'，bindToController: 真，解决: {用户:(AuthFactory)=>AuthFactory.check_login(),设置:(用户，用户工厂)=>UserFactory.settings(user),容器:($stateParams, TagsFactory) =>TagsFactory.createTerms($stateParams)}},'platformHeader@dashboard':{templateUrl: 'headers/platform/platform_header.html',控制器:'平台控制'，控制器为:'ph'},'timespanHeader@dashboard':{templateUrl: 'headers/timespan/timespan_header.html',控制器:'TimeHeaderCtrl'，控制器为:'thc'},'tickersPanel@dashboard':{templateUrl: 'tickers/panel/tickers_panel.html',控制器:'TickersPanelCtrl',控制器为:'tikp'},},参数:{股票代码:'',},数据:{授权角色:['全部']}},

登录状态对象:

登录:{name: '登录',网址:'/登录'，templateUrl: 'auth/login.html',控制器:'登录Ctrl'，数据:{授权角色:['全部']}}

dashboard.html 模板

<标题><div ui-view="platformHeader"></div><div ui-view="timespanHeader"></div></标题><旁边><!-- headers 和tickersPanel 都是仪表板状态 --><div ui-view="tickersPanel"></div><!-- 标签是与仪表板不同的状态 --><div ui-view="tagsPanel"></div></一边>//...

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)

解决方案

行为是对的.你不能过渡到抽象状态.看看你在 plunker 中的例子.

var dash = {name: '破折号',url: '/dash?ticker'var 标签 = {name: 'dash.tags',url: '?ticker',

你有一个抽象状态dash"，你有一个非抽象的子状态dash.tags".所以你只能过渡到子状态.

在您的应用中，您尝试转换到一个不可能的抽象状态.如果您想要一些具有共同行为的基本状态(父状态)，则使用抽象状态.你不能转换到这样的状态，但它们可以有一些基本的模板，解析函数......所以，你必须删除抽象标志或创建一个子状态.

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

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

---

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.

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'

Plnkr code:

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);

---

Real app

LoginController:

$state.go('dashboard')

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 state object:

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

dashboard.html template

<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',

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屋！