ui-router 默认子状态不起作用答案

【问题标题】：ui-router default child state not workingui-router 默认子状态不起作用
【发布时间】：2015-05-20 10:44:34
【问题描述】：

我正在测试UI-Router 嵌套状态，但我无法在父/子场景中设置默认状态，请帮助。

库：

角1.3.15
ui 路由器：0.2.15

导航路径：

/ - home
/settings - parent state/page
/settings.default - child 1
/settings.mail - child 2
/settings.phone - child 3

预期行为：

导航到/settings 时，应触发/加载默认子“常规”状态/页面

实际行为：

如果我设置'settings'状态'abstrat: true'，会报错：

Error: Cannot transition to abstract state 'settings'
    at Object.transitionTo (angular-ui-router.js:3143)
    at Object.go (angular-ui-router.js:3068)
    at angular-ui-router.js:4181
    at angular.js:16299
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312

如果我删除“abstrat: true”，则没有错误，但是当我导航到 /settings 时，默认子状态/页面 - 未触发一般状态，settings.html 显示但未加载

app.js：

angular.module('test',['ui.router','sails.io'])     //config routing
.config(['$stateProvider','$urlRouterProvider','$locationProvider',
        function($stateProvider,$urlRouterProvider,$locationProvider) {

  $urlRouterProvider.otherwise('/');    
  $locationProvider.html5Mode(true);

  $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'views/index.html',
        controller: 'IndexController'
    })
    .state('settings', {
        abstract: true,
        url: '/settings',
        templateUrl: 'views/settings.html',
        controller: 'SettingsController'
    })
    .state('settings.general', {
        url: '',
        templateUrl: 'views/settings/general.html',
        controller: 'SettingsController'
    })
    .state('settings.mail', {
        url: '/mail',
        templateUrl: 'views/settings/mail.html',
        controller: 'SettingsController'
    })
    .state('settings.phone', {
        url: '/phone',
        templateUrl: 'views/settings/phone.html',
        controller: 'SettingsController'
    });
}]);

views/settings.html

<div class="container">
  <div class="row">
    <div class="col-md-3">
      <ul class="list-group">
        <li class="list-group-item"><a ui-sref=".general">General</a></li>
        <li class="list-group-item"><a ui-sref=".phone">Phone</a></li>
        <li class="list-group-item"><a ui-sref=".mail">Mail</a></li>
      </ul>
    </div>
    <div class="col-md-9">
      <div ui-view></div>
    </div>
  </div>
</div>

【问题讨论】：

来自 ui-router wiki “抽象状态可以有子状态但不能自己激活。“抽象”状态只是一种无法转换到的状态。它在以下情况下被隐式激活它的一个后代被激活。”

标签： angularjs angular-ui-router

【解决方案1】：

有a working plunker

这可行，但仅使用url 导航，即href：

  <a href="/settings"> // will work

但这不会 - 我们不能进入 abstract 状态：

  <a ui-sref="settings">settings</a>

但基于此问答：

Redirect a state to default substate with UI-Router in AngularJS

我们可以像这样删除抽象并创建默认状态处理。有updated plunker

// redirection engine
app.run(['$rootScope', '$state', function($rootScope, $state) {

    $rootScope.$on('$stateChangeStart', function(evt, to, params) {
      if (to.redirectTo) {
        evt.preventDefault();
        $state.go(to.redirectTo, params)
      }
    });
}]);

父属性调整：

.state('settings', {
    //abstract: true,
    redirectTo: 'settings.general',
    url: '/settings',
    ...

查看here

【讨论】：

很高兴看到这一点 ;) 享受令人惊叹的 UI-Router
这会破坏后退按钮。

【解决方案2】：

我意识到这是一个较老的问题，但我想我会添加一些内容以防它对其他人有所帮助：

虽然你可能不想添加插件来解决这个问题，但你应该看看UI-Router-Extras

其中包含一个名为“深度状态重定向”的功能。这允许任何状态保存最近激活的子状态，以便当您转换离开然后返回时，相同的子状态（子状态）将处于活动状态。

可以帮助您解决问题的部分是能够定义默认子状态。为此，您可以添加“dsr”参数并将“默认”设置为您的子状态。

function myRouterConfig ($stateProvider, $urlRouterProvider) {
 $stateProvider
    .state('parentState', {
        //Not in this file          
        parent: 'index', 
        sticky: true,
        //ui-router-extras deepStateRedirect option
        dsr: {  
            default: 'parentState.defaultChild'
        },
        url: '/parentState',
        views: {
            'main@index': {
                template: '<my-parentStateComponent>'
            }
        }           
    })
    .state('parentState.defaultChild', {
        url: '/defaultChild',
        views: {
            'child@parentState': {
                template: '<my-defaultChildComponent>'
            }
        }
    });

}

【讨论】：